首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

百度mapAPI详解之map标注

2013-06-25 
百度地图API详解之地图标注从上面的图可以看出,不论地图如何变化标注始终指向“西单商场”的位置。如何知道某

百度地图API详解之地图标注

从上面的图可以看出,不论地图如何变化标注始终指向“西单商场”的位置。

如何知道某个点的坐标?

上例中我们在西单商场位置添加了一个标注,那么我是如何知道它的坐标点呢?可以通过API的事件机制来获取:

在地图API实现中,这三个DOM元素分别位于不同的容器中,这些容器可以通过map.getPanes()方法获得,其中markerMouseTarget就是标注点击区域所在容器、markerPane为标注图标所在容器,markerShadow为标注阴影所在图层。你可能会在自定义覆盖物时需要这些容器对象,这里只需要知道Marker的各个部分是如何放置的即可。

自定义标注图标

标注的图标是可以自定义的,通过Icon类可以自定义标注的图标,比如我希望使用下面这个图片作为标注图标:

百度mapAPI详解之map标注

已知这个图标大小为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),通俗的讲就是要指定图片的哪个位置是与标注真正的位置对应在一起。我们通过下面的图示来说明:

百度mapAPI详解之map标注

我们获取到地图上一个位置(上图中标注下端所在的黑色小方块),那么我也希望我标注中间下端指向这个位置,这个就需要通过anchor来调节。anchor的意义如下图所示:

百度mapAPI详解之map标注

即定位点距离图片左上角的偏移量。

如果不给anchor的话,API会自动获取图片中心点作为anchor位置:

百度mapAPI详解之map标注

我们看到标注图片中心的位置覆盖在那个小方块区域。

除了anchor之外,还有一个infoWindowAnchor属性,它是用来控制信息窗口开启的位置的(注意这里调用的是Marker的openInfoWindow方法,而不是Map的openInfoWindow方法),默认情况下它和icon的anchor是一个位置:

百度mapAPI详解之map标注

标注被InfoWindow的底角挡住了,通过infoWindowAnchor属性就可以改变开启位置:

尖角位置已经发生了改变。

标注拖拽

标注支持拖拽,并且可以配置是否有动画效果,我们修改创建标注的代码:

通过监听标注的dragend事件,你可以知道拖拽结束后标注的地理位置:

mkr.addEventListener('dragend', function(e){    alert(e.point.lng +', '+ e.point.lat);})

标注阴影

为了增加立体感,可以单独给标注添加阴影,当然你也可以把阴影直接画在icon所用的图片上,但是由于阴影和标注本身在一起,所以就不建议使用任何动画效果,否则会缺乏真实感。阴影可以通过MarkerOptions的shadow属性配置,类型也是一个Icon实例。具体使用方法和icon属性一样,这里就不赘述了。

热点排行