标注概述

标注(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);
  this.openInfoWindow(new BMap.InfoWindow('很好'));
})

标注阴影

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

百度地图Api详解之地图标注的更多相关文章

  1. [转]百度地图API详解之地图坐标系统

    博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...

  2. 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  3. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  4. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  5. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  6. 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  7. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  8. 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤    微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...

  9. 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据

    原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...

随机推荐

  1. EL表达式取整数或者取固定小数位数的简单实现

    EL表达式取整数或者取固定小数位数的简单实现 例如${8/7} ,${6/7} ,${12/7 } 在页面的显示结果分别为: 1.1428571428571428 0.8571428571428571 ...

  2. Qt通过UDP传图片,实现自定义分包和组包

    一.包头结构体 //包头 struct PackageHeader { //包头大小(sizeof(PackageHeader)) unsigned int uTransPackageHdrSize; ...

  3. java多线程使用HibernateSession 时报 No session 的解决办法(转)

    服务端新开多线程使用HibernateSession 杜绝No session 新起的线程需要绑定Hibernate session,才能在新线程中使用事务和延迟加载等功能,否则会曝出no sessi ...

  4. Java:基本数据类型包装类

    基本数据类型对象包装类    基本数据类型(关键字)   引用数据类型(类)          byte                          Byte          short   ...

  5. iOS:UIView的block函数实现转场动画---单视图

    使用UIView动画函数实现转场动画——单视图 + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration ...

  6. WEB前端介绍

    1.WEB前端是神马 Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为 ...

  7. 运行java -version报cannot restore segment prot after reloc: Permission denied

    linux 安装jdk1.6后,运行java -version,没有出现相关的版本信息,而是出现了以下错误: dl failure on line 685Error: failed /usr/loca ...

  8. openfire插件开发1

    http://www.cnblogs.com/hoojo/archive/2013/03/29/openfire_plugin_chatlogs_plugin_.html http://www.cnb ...

  9. C#基础(二)

    变量的命名规则: 1.变量名由字母,数字 ,下划线组成.@ 中文 2.首字母,不能是数字 3.不能与关键字重名 变量的定义 语法: 数据类型 变量名[=值]; int a;      //只定义变量 ...

  10. 两个学生OJ差集

    这个程序非常简单,因为用了最笨的办法,不过运行一点儿也不慢... 在我们学校OJ平台每个人的个人信息中都有Solved Problems List,我们可以用这个简单的程序输入两个人解决问题的所有题号 ...