百度地图的API手册

百度地图API开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心:1.html2.head3.metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/4.titleHello,World/title5.scripttype=text/javascriptsrc==46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false/script6./head7.body8.divstyle=width:520px;height:340px;border:1pxsolidgrayid=container/div9./body10./html11.12.1.scripttype=text/javascript2.varmap=newBMap.Map(container);//创建地图实例3.varpoint=newBMap.Point(116.404,39.915);//创建点坐标4.map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别5./script6.引用百度地图API文件当您引用地图API文件时，需要使用自己申请的API密钥。1.scripttype=text/javascriptsrc==46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false/script创建地图容器元素1.divstyle=width:520px;height:340px;border:1pxsolid#000id=container/div地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。命名空间API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。创建地图实例1.varmap=newBMap.Map(container);位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。创建点坐标1.varpoint=newBMap.Point(116.404,39.915);这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。地图初始化1.map.centerAndZoom(point,15);在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。地图操作地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。1.varmap=newBMap.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);地图控件概述百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。地图API中提供的控件有：Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。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(newBMap.NavigationControl());可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。1.map.addControl(newBMap.NavigationControl());2.map.addControl(newBMap.ScaleControl());3.map.addControl(newBMap.OverviewMapControl());控制控件的位置初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。其中anchor和offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角，允许的值为：BMAP_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));修改控件的配置地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。本示例将调整平移缩放地图控件的外观。1.varopts={type:BMAP_NAVIGATION_CONTROL_SMALL}2.map.addControl(newBMap.NavigationControl(opts));自定义控件百度地图API允许您通过继承BMap.Control来创建自定义地图控件。（注意JavaScript是通过prototype属性进行继承的）要创建可用的自定义控件，您需要实现类定义中的一个抽象方法并给两个属性赋值，它们是：initialize()和defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的DOM元素，defaultAnchor为控件默认的停靠位置，defaultOffset为控件默认的间隔距离。所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，这个地图容器可以通过BMap.Map.getContainer()方法获得。在此示例中，创建一个简单的放大控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。1.//定义一个控件类，即function2.functionZoomControl(){3.//设置默认停靠位置和偏移量4.this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;5.this.defaultOffset=newBMap.Size(10,10);6.}7.//通过JavaScript的prototype属性继承于BMap.Control8.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(document.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.returndiv;28.}29.//创建控件30.varmyZoomCtrl=newZoomControl();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.varmap=newBMap.Map(container);2.varpoint=newBMap.Point(116.404,39.915);3.map.centerAndZoom(point,15