本文将向你们介绍百度地图API的标注（Marker）的使用方法和一些实现细节。函数
标注概述工具
标注（Marker）是用来表示一个点位置的可见元素，每一个标注自身都包含地理信息。好比你在西单商场位置添加了一个标注，不论地图移动、缩放，标注都会跟随一块儿移动，保证其始终指向正确的地理位置。post
从上面的图能够看出，不论地图如何变化标注始终指向“西单商场”的位置。动画
如何知道某个点的坐标？url
上例中咱们在西单商场位置添加了一个标注，那么我是如何知道它的坐标点呢？能够经过API的事件机制来获取：spa
map.addEventListener('click', function(e){
console.log(e.point);
});
咱们在map对象上添加了一个click事件的监听函数，当点击地图上某个位置时，监听函数经过控制台把当前点击的位置输出出来（注意须要有控制台的支持，好比firebug，若是没有控制台则可以使用alert把point的lng和lat属性输出出来）。此外，你也可使用API提供的坐标拾取工具来完成（http://dev.baidu.com/wiki/static/map/API/tool/getPoint/），它支持检索而且点击地图上任意位置时会出现该位置的坐标。3d
标注元素组成code
从DOM元素构成角度看，一个完整的标注是由如下几个部分组成的：对象
- 标注点击区域
- 标注图标
- 标注阴影
下面是示意图：blog
在地图API实现中，这三个DOM元素分别位于不一样的容器中，这些容器能够经过map.getPanes()方法得到，其中markerMouseTarget就是标注点击区域所在容器、markerPane为标注图标所在容器，markerShadow为标注阴影所在图层。你可能会在自定义覆盖物时须要这些容器对象，这里只须要知道Marker的各个部分是如何放置的便可。
自定义标注图标
标注的图标是能够自定义的，经过Icon类能够自定义标注的图标，好比我但愿使用下面这个图片做为标注图标：
已知这个图标大小为20x32。咱们初始化地图，接着定义Icon，并赋给一个Marker实例：
var map =new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.380797, 39.918497), 18);
var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30)
});
var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), {
icon: icon
});
map.addOverlay(mkr);
咱们给定icon所需图片的url，接着是图片的尺寸，另外咱们还增长了anchor属性，这个是干什么用的呢？在自定义标注图标时有一点须要注意的就是标注的定位点（anchor），通俗的讲就是要指定图片的哪一个位置是与标注真正的位置对应在一块儿。咱们经过下面的图示来讲明：
咱们获取到地图上一个位置（上图中标注下端所在的黑色小方块），那么我也但愿我标注中间下端指向这个位置，这个就须要经过anchor来调节。anchor的意义以下图所示：
即定位点距离图片左上角的偏移量。
若是不给anchor的话，API会自动获取图片中心点做为anchor位置：
咱们看到标注图片中心的位置覆盖在那个小方块区域。
除了anchor以外，还有一个infoWindowAnchor属性，它是用来控制信息窗口开启的位置的（注意这里调用的是Marker的openInfoWindow方法，而不是Map的openInfoWindow方法），默认状况下它和icon的anchor是一个位置：
标注被InfoWindow的底角挡住了，经过infoWindowAnchor属性就能够改变开启位置：
var icon =new BMap.Icon('pin.png', new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30),
infoWindowAnchor: new BMap.Size(10, 0)
})
再看看效果：
尖角位置已经发生了改变。
标注拖拽
标注支持拖拽，而且能够配置是否有动画效果，咱们修改建立标注的代码：
var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), {
icon: icon,
enableDragging: true,
raiseOnDrag: true
});
这里开启了拖拽功能以及响应的动画效果。若是此时拖拽地图你会获得以下效果：
经过监听标注的dragend事件，你能够知道拖拽结束后标注的地理位置：
mkr.addEventListener('dragend', function(e){
alert(e.point.lng +', '+ e.point.lat);
})
标注阴影
为了增长立体感，能够单独给标注添加阴影，固然你也能够把阴影直接画在icon所用的图片上，可是因为阴影和标注自己在一块儿，因此就不建议使用任何动画效果，不然会缺少真实感。阴影能够经过MarkerOptions的shadow属性配置，类型也是一个Icon实例。具体使用方法和icon属性同样，这里就不赘述了。