百度地图

由于我最近做这个租房的网站，所以用到了百度地图，自己这几天好好读了一下百度地图的API，在这里谈谈对百度地图的认识和操作过程。

我们想要使用百度地图必须先申请一个百度接口的秘钥，申请成功之后我们就可以使用了，我们一点一点随着文档读写，首先就是连接：

JavaScript API支持异步加载，您可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例：

这些就是添加控件，我么还可以设置这些控件的位置，比如：

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。

控件停靠位置 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。anchor允许的值为：

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

本示例将比例尺放置在地图的左下角，由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。

1 var opts = {offset: new BMap.Size(150, 5)}    
2 map.addControl(new BMap.ScaleControl(opts));

修改控件配置

地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。例如，NavigationControl控件就提供了如下类型：

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。

代码：

1 var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
2 map.addControl(new BMap.NavigationControl(opts));

定义构造函数并继承Control

首先您需要定义自定义控件的构造函数，并在构造函数中提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。在下面的示例中我们定义一个名为ZoomControl的控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。

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();

初始化自定义控件

当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。

 1 // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
 2 // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
 3 ZoomControl.prototype.initialize = function(map){    
 4 // 创建一个DOM元素   
 5  var div = document.createElement("div");    
 6 // 添加文字说明    
 7  div.appendChild(document.createTextNode("放大2级"));    
 8  // 设置样式    
 9  div.style.cursor = "pointer";    
10  div.style.border = "1px solid gray";    
11  div.style.backgroundColor = "white";    
12  // 绑定事件，点击一次放大两级    
13  div.onclick = function(e){  
14   map.zoomTo(map.getZoom() + 2);    
15  }    
16  // 添加DOM元素到地图中   
17  map.getContainer().appendChild(div);    
18  // 将DOM元素返回  
19  return div;    
20  }

添加自定义控件

添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。

1 // 创建控件实例    
2 var myZoomCtrl = new ZoomControl();

标注

标注表示地图上的点。API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和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);                     // 将标注添加到地图中

定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用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 function addMarker(point, index){  // 创建图标对象   
 5 var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
 6 // 指定定位位置。   
 7 // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
 8 // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
 9    // 图标中央下端的尖角位置。    
10    offset: new BMap.Size(10, 25),    
11    // 设置图片偏移。   
12    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
13    // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
14    imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
15  });      
16 // 创建标注对象并添加到地图   
17  var marker = new BMap.Marker(point, {icon: myIcon});    
18  map.addOverlay(marker);    
19 }    
20 // 随机向地图添加10个标注    
21 var bounds = map.getBounds();    
22 var lngSpan = bounds.maxX - bounds.minX;    
23 var latSpan = bounds.maxY - bounds.minY;    
24 for (var i = 0; i < 10; i ++) {    
25  var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
26                             bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
27  addMarker(point, i);    
28 }

监听标注事件

事件方法与Map事件机制相同。可参考事件部分。

1 marker.addEventListener("click", function(){    
2  alert("您点击了标注");    
3 });

信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用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());      // 打开信息窗口

初始化自定义覆盖物

当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程中需要创建覆盖物所需要的DOM元素，并添加到地图相应的容器中。

地图提供了若干容器供覆盖物展示，通过map.getPanes方法可以得到这些容器元素，它们包括：

floatPane
markerMouseTarget
floatShadow
labelPane
markerPane
mapPane

这些对象代表了不同的覆盖物容器元素，它们之间存在着覆盖关系，最上一层为floatPane，用于显示信息窗口内容，下面依次为标注点击区域层、信息窗口阴影层、文本标注层、标注层和矢量图形层。

我们自定义的方形覆盖物可以添加到任意图层上，这里我们选择添加到markerPane上，作为其一个子结点。

 1 // 实现初始化方法  
 2 SquareOverlay.prototype.initialize = function(map){    
 3 // 保存map对象实例   
 4  this._map = map;        
 5  // 创建div元素，作为自定义覆盖物的容器   
 6  var div = document.createElement("div");    
 7  div.style.position = "absolute";        
 8  // 可以根据参数设置元素外观   
 9  div.style.width = this._length + "px";    
10  div.style.height = this._length + "px";    
11  div.style.background = this._color;      
12 // 将div添加到覆盖物容器中   
13  map.getPanes().markerPane.appendChild(div);      
14 // 保存div实例   
15  this._div = div;      
16 // 需要将div元素作为方法的返回值，当调用该覆盖物的show、   
17 // hide方法，或者对覆盖物进行移除时，API都将操作此元素。   
18  return div;    
19 }

绘制覆盖物

到目前为止，我们仅仅把覆盖物添加到了地图上，但是并没有将它放置在正确的位置上。您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置。通过map.pointToOverlayPixel方法可以将地理坐标转换到覆盖物的所需要的像素坐标。

1 // 实现绘制方法   
2 SquareOverlay.prototype.draw = function(){    
3 // 根据地理坐标转换为像素坐标，并设置给容器    
4  var position = this._map.pointToOverlayPixel(this._center);    
5  this._div.style.left = position.x - this._length / 2 + "px";    
6  this._div.style.top = position.y - this._length / 2 + "px";    
7 }

移除覆盖物

当调用map.removeOverlay或者map.clearOverlays方法时，API会自动将initialize方法返回的DOM元素进行移除。

显示和隐藏覆盖物

自定义覆盖物会自动继承Overlay的show和hide方法，方法会修改由initialize方法返回的DOM元素的style.display属性。如果自定义覆盖物元素较为复杂，您也可以自己实现show和hide方法。

 1 // 实现显示方法    
 2 SquareOverlay.prototype.show = function(){    
 3  if (this._div){    
 4    this._div.style.display = "";    
 5  }    
 6 }      
 7 // 实现隐藏方法  
 8 SquareOverlay.prototype.hide = function(){    
 9  if (this._div){    
10    this._div.style.display = "none";    
11  }    
12 }

自定义其他方法通过构造函数的prototype属性，您可以添加任何自定义的方法，比如下面这个方法每调用一次就能改变覆盖物的显示状态：

 1 // 添加自定义方法   
 2 SquareOverlay.prototype.toggle = function(){    
 3  if (this._div){    
 4    if (this._div.style.display == ""){    
 5      this.hide();    
 6    }    
 7    else {    
 8      this.show();    
 9    }    
10  }    
11 }

添加覆盖物

您现在已经完成了一个完整的自定义覆盖物的编写，可以添加到地图上了。

1 // 初始化地图  
2 var map = new BMap.Map("container");    
3 var point = new BMap.Point(116.404, 39.915);    
4 map.centerAndZoom(point, 15);    
5 // 添加自定义覆盖物   
6 var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
7 map.addOverlay(mySquare);