百度地图的API手册.docx

1、XX地图的API手册XX地图API开始学习XX地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. 2. 3. 4. Hello,World5. scripttype=text/javascriptsrc=6. 7. 8. 9. 10. 11. 12. Hello, Worldscript type=text/javascript src= 1. 2. varmap=newBMap.Map(container);/创建地图实例 3. varpoint=newBMap.Point(116.404,39.915);/创建点坐标 4

2、. map.centerAndZoom(point,15);/初始化地图，设置中心点坐标和地图级别 5. 6. var map = new BMap.Map(container); / 创建地图实例var point = new BMap.Point(116.404, 39.915); / 创建点坐标map.centerAndZoom(point, 15); / 初始化地图，设置中心点坐标和地图级别 引用XX地图API文件当您引用地图API文件时，需要使用自己申请的API密钥。1. scripttype=text/javascriptsrc=script type=text/javascrip

3、t src= 创建地图容器元素1. 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。创建地图实例1. varmap=newBMap.Map(container); var map = new BMap.Map(container); 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。注意在调用此构造函数

4、时应确保容器元素已经添加到地图上。 创建点坐标1. varpoint=newBMap.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()方法要求设

5、置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。地图操作 地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与XX地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。 下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。 1. varmap=newB

6、Map.Map(container); 2. varpoint=newBMap.Point(116.404,39.915); 3. map.centerAndZoom(point,15); 4. window.setTimeout(function() 5. map.panTo(newBMap.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.setT

7、imeout(function() map.panTo(new BMap.Point(116.409, 39.918);, 2000); 地图控件概述 XX地图上负责与地图交互的UI元素称为控件。XX地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。 地图API中提供的控件有： Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。 NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。 OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折

8、叠的缩略地图。 ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。 CopyrightControl：版权控件，默认位于地图左下方。 所有这些控件都基于BMap.Control类。向地图添加控件可以使用BMap.Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容： 1. varmap=newBMap.Map(container); 2. map.centerAndZoom(newBMap.Point(116.404,39.915),11); 3. map.addControl(n

9、ewBMap.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(newBMap.NavigationControl(); 2. map.addControl(newBMap.Sc

10、aleControl(); 3. map.addControl(newBMap.OverviewMapControl();map.addControl(new BMap.NavigationControl();map.addControl(new BMap.ScaleControl();map.addControl(new BMap.OverviewMapControl();控制控件的位置 初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。其中anchor和offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角，允许的值为： B

11、MAP_ANCHOR_TOP_LEFT BMAP_ANCHOR_TOP_RIGHT BMAP_ANCHOR_BOTTOM_LEFT BMAP_ANCHOR_BOTTOM_RIGHT 除了指定停靠位置外，还可以提供偏移量，用来指示控件距离地图边界相隔多少像素。 本示例将标准地图控件放置在地图的右上角，间隔10个像素。 1. varopts=anchor:BMAP_ANCHOR_TOP_RIGHT,offset:newBMap.Size(10,10) 2. map.addControl(newBMap.NavigationControl(opts);var opts = anchor: BMAP_

12、ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)map.addControl(new BMap.NavigationControl(opts);修改控件的配置地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。 本示例将调整平移缩放地图控件的外观。 1. varopts=type:BMAP_NAVIGATION_CONTROL_SMALL 2. map.addControl(newBMap.NavigationControl(opts);var opts = type: BMAP_NAVIGATION_CO

13、NTROL_SMALLmap.addControl(new BMap.NavigationControl(opts);自定义控件XX地图API允许您通过继承BMap.Control来创建自定义地图控件。（注意JavaScript是通过prototype属性进行继承的） 要创建可用的自定义控件，您需要实现类定义中的一个抽象方法并给两个属性赋值，它们是：initialize()和defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的DOM元素，defaultAnchor为控件默认的停靠位置，defaultOffset为控件默认的间隔距离。 所有自定义

14、的地图控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，这个地图容器可以通过BMap.Map.getContainer()方法获得。在此示例中，创建一个简单的放大控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。1. /定义一个控件类，即function 2. functionZoomControl() 3. /设置默认停靠位置和偏移量 4. this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT; 5. this.defaultOffset=newBMap.Size(10,10); 6. 7. /通过Jav

15、aScript的prototype属性继承于BMap.Control 8. ZoomControl.prototype=newBMap.Control(); 9. /自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回 10. /在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 11. ZoomControl.prototype.initialize=function(map) 12. /创建一个DOM元素 13. vardiv=document.createElement(div); 14. /添加文字说明 15. div.appendChild(do

16、cument.createTextNode(放大2级); 16. /设置样式 17. div.style.cursor=pointer; 18. div.style.border=1pxsolidgray; 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.

17、 returndiv; 28. 29. /创建控件 30. varmyZoomCtrl=newZoomControl(); 31. /添加到地图当中 32. map.addControl(myZoomCtrl);地图覆盖物概述所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。 地图API提供了如下几种覆盖物： Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。 Marker：标注表示地图上的点，可自定义标注的图标。 Label：表示地图上的文本

18、标注，您可以自定义标注的文本内容。 Polyline：表示地图上的折线。 Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。 InfoWindow：信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地图上打开。 可以使用BMap.Map.addOverlay()方法向地图添加覆盖物，使用BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。 标注标注表示地图上的点。API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。BMap.Marker的构造函数的参数为BMap.Point和

19、BMap.MarkerOptions（可选）。 注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。下面的示例向地图中心点添加了一个标注，并使用默认的标注样式。1. varmap=newBMap.Map(container); 2. varpoint=newBMap.Point(116.404,39.915); 3. map.centerAndZoom(point,15); 4. varmarker=newBMap.Marker(point);/创建标注 5. map.addOverlay(marker);/将标注添加到地图

20、中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. varmap=newBMa

21、p.Map(container); 2. varpoint=newBMap.Point(116.404,39.915); 3. map.centerAndZoom(point,15); 4. /编写自定义函数，创建标注 5. functionaddMarker(point,index) 6. /创建图标对象 7. varmyIcon=newBMap.Icon(newBMap.Size(23,25), 8. offset:newBMap.Size(10,25),/指定定位位置 9. imageOffset:newBMap.Size(0,0-index*25)/设置图片偏移 10. ); 11.

22、varmarker=newBMap.Marker(point,icon:myIcon); 12. map.addOverlay(marker); 13. 14. /随机向地图添加10个标注 15. varbounds=map.getBounds(); 16. varlngSpan=bounds.maxX-bounds.minX; 17. varlatSpan=bounds.maxY-bounds.minY; 18. for(vari=0;i10;i+) 19. varpoint=newBMap.Point(bounds.minX+lngSpan*(Math.random()*0.7+0.15)

23、, 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

24、: 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

25、= 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(您点击了标注););内存释放如果您在地图中需要反复添加大量的标注，这可