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

简介:

 

本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节。

标注概述

标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息。比如你在西单商场位置添加了一个标注,不论地图移动、缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置。

 

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

如何知道某个点的坐标?

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


 
 
  1. map.addEventListener('click', function(e){  
  2. console.log(e.point);  
  3. }); 

我们在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实例:


 
 
  1. varmap =newBMap.Map('container');  
  2. map.centerAndZoom(newBMap.Point(116.380797, 39.918497), 18);  
  3. var icon = new BMap.Icon('pin.png'new BMap.Size(20, 32), {  
  4. anchor: new BMap.Size(10, 30)  
  5. });varmkr =newBMap.Marker(newBMap.Point(116.38075,39.918986), {  
  6. icon: icon  
  7. });  
  8. map.addOverlay(mkr); 

我们给定icon所需图片的url,接着是图片的尺寸,另外我们还增加了anchor属性,这个是干什么用的呢?在自定义标注图标时有一点需要注意的就是标注的定位点(anchor),通俗的讲就是要指定图片的哪个位置是与标注真正的位置对应在一起。我们通过下面的图示来说明:

 

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

 

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

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

 

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

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

 

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


 
 
  1. varicon =newBMap.Icon('pin.png', newBMap.Size(20, 32), {  
  2. anchor: newBMap.Size(10, 30),  
  3. infoWindowAnchor: newBMap.Size(10, 0)  
  4. }) 

再看看效果:

 

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

标注拖拽

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


 
 
  1. varmkr =newBMap.Marker(newBMap.Point(116.38075,39.918986), {  
  2. icon: icon,  
  3. enableDragging: true,  
  4. raiseOnDrag: true}); 

这里开启了拖拽功能以及响应的动画效果。如果此时拖拽地图你会得到如下效果:

 

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


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

标注阴影

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

 

【本文首发于: 百度互联网技术官方博客













本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/744321,如需转载请自行联系原作者

相关文章
|
8天前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
4月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
70 0
|
5月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
257 0
|
6月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
454 0
|
Web App开发 JavaScript 测试技术
【百度地图API】多家地图API内存消耗对比测验(带源码)
原文:【百度地图API】多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫做“双林寺”。
960 0
|
14天前
|
JSON API 数据格式
淘宝 / 天猫官方商品 / 订单订单 API 接口丨商品上传接口对接步骤
要对接淘宝/天猫官方商品或订单API,需先注册淘宝开放平台账号,创建应用获取App Key和App Secret。之后,详细阅读API文档,了解接口功能及权限要求,编写认证、构建请求、发送请求和处理响应的代码。最后,在沙箱环境中测试与调试,确保API调用的正确性和稳定性。
|
26天前
|
供应链 数据挖掘 API
电商API接口介绍——sku接口概述
商品SKU(Stock Keeping Unit)接口是电商API接口中的一种,专门用于获取商品的SKU信息。SKU是库存量单位,用于区分同一商品的不同规格、颜色、尺寸等属性。通过商品SKU接口,开发者可以获取商品的SKU列表、SKU属性、库存数量等详细信息。
|
28天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
2月前
|
编解码 监控 API
直播源怎么调用api接口
调用直播源的API接口涉及开通服务、添加域名、获取API密钥、调用API接口、生成推流和拉流地址、配置直播源、开始直播、监控管理及停止直播等步骤。不同云服务平台的具体操作略有差异,但整体流程简单易懂。
|
18天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释