关于百度地图api的使用心得

可以参考官方demo，已经相当全面了，这是支持javascript，android，ios的使用方案，碎玉前端范畴，项目需要也了解了一下。

官方demo地址 百度地图api DEMO

下面的内容大部分参考自：http://www.cnblogs.com/xuhongfei/archive/2013/04/10/3011964.html

总结一下

1.首先是要申请ak，初学的话一般都是在浏览器上查看，所以可以选择新增的应用范围市浏览器，选择web服务或者其他的在浏览器上是无法查看的；

2.来分析下代码模块

这是引入的百度地图api

var map = new BMap.Map("container"); // 创建地图实例

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。

命名空间 

API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

上面的代码位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var point = new BMap.Point(116.404, 39.915); // 创建点坐标

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。

map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
地图必须经过初始化才可以执行其他操作。

在创建地图实例后，我们需要对其进行初始化，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. // 创建控件