百度地图API的使用方法.doc
百度地图API的使用方法.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 百度 地图 API 使用方法
- 资源描述：
-
-教育精选- 百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4. <title>Hello, World</title> 5. <script type="text/javascript" src=" "></script> 6. </head> 7. <body> 8. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 9. </body> 10. </html> 11. 12. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <script type="text/javascript" src=" "></script> </head> <body> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> </body> </html> 1. <script type="text/javascript"> 2. var map = new BMap.Map("container"); // 创建地图实例 3. var point = new BMap.Point(116.404, 39.915); // 创建点坐标 4. map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 5. </script> 6. <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> 引用百度地图API文件 当您引用地图API文件时，需要使用自己申请的API密钥。 1. <script type="text/javascript" src="” ></script> <script type="text/javascript" src=" "></script> 创建地图容器元素 1. <div style="width:520px;height:340px;border:1px solid #000" id="container"></div> <div style="width:520px;height:340px;border:1px solid #000" id="container"></div> 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。 命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。 创建地图实例 1. var map = new BMap.Map("container"); var map = new BMap.Map("container"); 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。 注意在调用此构造函数时应确保容器元素已经添加到地图上。 创建点坐标 1. var point = new BMap.Point(116.404, 39.915); var point = new BMap.Point(116.404, 39.915); 这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。 地图初始化 1. map.centerAndZoom(point,15); map.centerAndZoom(point,15); 在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。 地图操作 地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。 下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。 1. var map = new BMap.Map("container"); 2. var point = new BMap.Point(116.404, 39.915); 3. map.centerAndZoom(point, 15); 4. window.setTimeout(function(){ 5. map.panTo(new BMap.Point(116.409, 39.918)); 6. }, 2000); var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 39.918)); }, 2000); 地图控件概述 百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。 地图API中提供的控件有： · Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。 · NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。 · OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。 · ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。 · CopyrightControl：版权控件，默认位于地图左下方。 所有这些控件都基于BMap.Control类。 向地图添加控件 可以使用BMap.Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容： 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. map.addControl(new BMap.NavigationControl()); var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); 可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。 1. map.addControl(new BMap.NavigationControl()); 2. map.addControl(new BMap.ScaleControl()); 3. map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); 控制控件的位置 初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。其中anchor和offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角，允许的值为： · BMAP_ANCHOR_TOP_LEFT · BMAP_ANCHOR_TOP_RIGHT · BMAP_ANCHOR_BOTTOM_LEFT · BMAP_ANCHOR_BOTTOM_RIGHT 除了指定停靠位置外，还可以提供偏移量，用来指示控件距离地图边界相隔多少像素。 本示例将标准地图控件放置在地图的右上角，间隔10个像素。 1. var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)} 2. map.addControl(new BMap.NavigationControl(opts)); var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)} map.addControl(new BMap.NavigationControl(opts)); 修改控件的配置 地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。 本示例将调整平移缩放地图控件的外观。 1. var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} 2. map.addControl(new BMap.NavigationControl(opts)); var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts)); 自定义控件 百度地图API允许您通过继承BMap.Control来创建自定义地图控件。（注意JavaScript是通过prototype属性进行继承的） 要创建可用的自定义控件，您需要实现类定义中的一个抽象方法并给两个属性赋值，它们是：initialize()和defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的DOM元素，defaultAnchor为控件默认的停靠位置，defaultOffset为控件默认的间隔距离。 所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，这个地图容器可以通过BMap.Map.getContainer()方法获得。 在此示例中，创建一个简单的放大控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。 1. // 定义一个控件类，即function 2. function ZoomControl(){ 3. // 设置默认停靠位置和偏移量 4. this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; 5. this.defaultOffset = new BMap.Size(10, 10); 6. } 7. // 通过JavaScript的prototype属性继承于BMap.Control 8. ZoomControl.prototype = new BMap.Control(); 9. // 自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回 10. // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 11. ZoomControl.prototype.initialize = function(map){ 12. // 创建一个DOM元素 13. var div = document.createElement("div"); 14. // 添加文字说明 15. div.appendChild(document.createTextNode("放大2级")); 16. // 设置样式 17. div.style.cursor = "pointer"; 18. div.style.border = "1px solid gray"; 19. div.style.backgroundColor = "white"; 20. // 绑定事件，点击一次放大两级 21. div.onclick = function(e){ 22. map.zoomTo(map.getZoom() + 2); 23. } 24. // 添加DOM元素到地图中 25. map.getContainer().appendChild(div); 26. // 将DOM元素返回 27. return div; 28. } 29. // 创建控件 30. var myZoomCtrl = new ZoomControl(); 31. // 添加到地图当中 32. map.addControl(myZoomCtrl); 地图覆盖物概述 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。 地图API提供了如下几种覆盖物： · Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。 · Marker：标注表示地图上的点，可自定义标注的图标。 · Label：表示地图上的文本标注，您可以自定义标注的文本内容。 · Polyline：表示地图上的折线。 · Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。 · InfoWindow：信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地图上打开。 可以使用BMap.Map.addOverlay()方法向地图添加覆盖物，使用BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。 标注 标注表示地图上的点。API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。BMap.Marker的构造函数的参数为BMap.Point和BMap.MarkerOptions（可选）。 注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。 下面的示例向地图中心点添加了一个标注，并使用默认的标注样式。 1. var map = new BMap.Map("container"); 2. var point = new BMap.Point(116.404, 39.915); 3. map.centerAndZoom(point, 15); 4. var marker = new BMap.Marker(point); // 创建标注 5. map.addOverlay(marker); // 将标注添加到地图中 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 定义标注图标 通过BMap.Icon类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions的icon属性进行设置，您也可以使用BMap.Marker.setIcon()方法。 1. var map = new BMap.Map("container"); 2. var point = new BMap.Point(116.404, 39.915); 3. map.centerAndZoom(point, 15); 4. // 编写自定义函数，创建标注 5. function addMarker(point, index){ 6. // 创建图标对象 7. var myIcon = new BMap.Icon("", new BMap.Size(23, 25), { 8. offset: new BMap.Size(10, 25), // 指定定位位置 9. imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移 10. }); 11. var marker = new BMap.Marker(point, {icon: myIcon}); 12. map.addOverlay(marker); 13. } 14. // 随机向地图添加10个标注 15. var bounds = map.getBounds(); 16. var lngSpan = bounds.maxX - bounds.minX; 17. var latSpan = bounds.maxY - bounds.minY; 18. for (var i = 0; i < 10; i ++) { 19. var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15), 20. bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); 21. addMarker(point, i); 22. } var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 编写自定义函数，创建标注 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMap.Icon(" new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移 }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); } // 随机向地图添加10个标注 var bounds = map.getBounds(); var lngSpan = bounds.maxX - bounds.minX; var latSpan = bounds.maxY - bounds.minY; for (var i = 0; i < 10; i ++) { var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15), bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); addMarker(point, i); } 监听标注的事件 事件方法与Map事件机制相同。 1. marker.addEventListener("click", function(){ 2. alert("您点击了标注"); 3. }); marker.addEventListener("click", function(){ alert("您点击了标注"); }); 内存释放 如果您在地图中需要反复添加大量的标注，这可能会占用较多的内存资源。如果您的标注在被移除后不再使用，可调用Overlay.dispose()方法来释放内存。注意在调用此方法后标注将不能再次添加到地图上。 例如，您可以在标注被移除后调用此方法： 1. map.removeOverlay(marker); 2. marker.dispose(); map.removeOverlay(marker); marker.dispose(); 信息窗口 信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。 可以使用BMap.InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。 1. var opts = { 2. width : 250, // 信息窗口宽度 3. height: 100, // 信息窗口高度 4. title : "Hello" // 信息窗口标题 5. } 6. var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象 7. map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 var opts = { width : 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "Hello" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 折线 BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。 添加折线 折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。 BMap.Polyline对象需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。 以下代码段会在两点之间创建6像素宽的蓝色折线： 1. var polyline = new BMap.Polyline([ 2. new BMap.Point(116.399, 39.910), 3. new BMap.Point(116.405, 39.920) 4. ], 5. {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} 6. ); 7. map.addOverlay(polyline); 地图事件概述 浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。 百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。 事件的监听 百度地图API中的每一个对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。 有关地图API对象的事件，请参考完整的API参考文档。 addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。下面示例中，每当用户点击地图时，会弹出一个警告框。 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. map.addEventListener("click", function(){ 4. alert("您点击了地图。"); 5. }); var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("click", function(){ alert("您点击了地图。"); }); 通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. map.addEventListener("dragend", function(){ 4. var center = map.getCenter(); 5. document.getElementById("info").innerHTML = center.lng + ", " + center.lat; 6. }); var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("dragend", function(){ var center = map.getCenter(); document.getElementById("info").innerHTML = center.lng + ", " + center.lat; }); 事件参数和this 在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。 百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。 API还保证函数内的this指向触发（同时也是绑定）事件的API对象。 例如，通过参数e得到点击的经纬度坐标。 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. map.addEventListener("click", function(e){ 4. document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat; 5. }); var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("click", function(e){ document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat; }); 或者通过this得到地图缩放后的级别。 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. map.addEventListener("zoomend", function(){ 4. document.getElementById("info").innerHTML = "地图缩放至：" + this.getZoom() + "级"; 5. }); 移除监听事件 当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。 下面示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。 1. var map = new BMap.Map("container"); 2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 3. function showInfo(e){ 4. document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat; 5. map.removeEventListener("click", showInfo); 6. } 7. map.addEventListener("click", showInfo); 地图图层概念 地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。 在最低的缩放级别（级别 1）中，整个地球由 4 张图块组成。随着级别的增长，地图所使用的图块个数也随之增多。 自定义图层 百度地图中提供一个BMap.TileLayer类，可以实现用户自定义图层功能。可以在百度地图上叠加一层自定义的图块。 以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层，使用浮动红色小水滴表示图块的轮廓。 1. var map = new BMap.Map("container"); // 创建地图实例 2. var point = new BMap.Point(116.404, 39.915); // 创建点坐标 3. map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别 4. var tilelayer = new BMap.TileLayer(); // 创建地图层实例 5. tilelayer.getTilesUrl=function(){ // 设置图块路径 6. return "layer.gif"; 7. }; 8. map.addTileLayer(tilelayer); // 将图层添加到地图上 地图工具概述 百度地图提供了交互功能更为复杂的“工具”，它包括： · PushpinTool：标注工具。通过此工具用户可在地展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/2402340.html