转自:http://www.cnblogs.com/jz1108/archive/2011/09/15/2152122.html
本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节。
标注概述
标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息。比如你在西单商场位置添加了一个标注,不论地图移动、缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置。
从上面的图可以看出,不论地图如何变化标注始终指向“西单商场”的位置。
如何知道某个点的坐标?
上例中我们在西单商场位置添加了一个标注,那么我是如何知道它的坐标点呢?可以通过API的事件机制来获取:
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/),它支持检索并且点击地图上任意位置时会出现该位置的坐标。
标注元素组成
从DOM元素构成角度看,一个完整的标注是由以下几个部分组成的:
- 标注点击区域
- 标注图标
- 标注阴影
下面是示意图:
在地图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属性一样,这里就不赘述了。
相关推荐
百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层 ,包括marker 的点击前后坐标不同的问题,都有完美的解决方案
百度最全api,详解百度地图二次开发,对一些码农来说却是很好东西,值得拥有啊
C#API大全 API详解C#API大全 API详解C#API大全 API详解
这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图API获取某地址的经纬度的相关内容,分享出来供...
Android百度地图实例详解之仿摩拜单车APP,包括附近车辆、规划路径、行驶距离、行驶轨迹记录,轨迹回放,导航等
Ext API详解 Ext API详解 Ext API详解
百度地图的详细知识,涵盖地图的引用,地图图层,路径规划,地理信息编码,反编码,属性和方法详解!特别适合 初学者!通俗易懂!
如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取、引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文。 首先 ,如果...
步骤一:申请百度地图密钥; JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 认证企业用户。百度地图API 链接地址:...
小程序中地图API使用的视频教学,有详细的介绍,希望对你有帮助
Android-API详解大全
整理的Ext API详解 .rar 整理的Ext API详解 .rar
很好的资料,有地图开发兴趣的朋友可以看看
百度地图 API 产品简介 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 ...
EXT核心API详解 EXT核心API详解 EXT核心API详解
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子。 示例一: API地址:http://developer.baidu.com/map/jsdemo.htm#a1_2 <!DOCTYPE html> <...
ODBC API编程详解,及其API函数使用详解
Android百度地图实例详解之仿摩拜单车APP,包括附近车辆、规划路径、行驶距离、行驶轨迹记录,轨迹回放,导航等