`
CshBBrain
  • 浏览: 651160 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:145162
Group-logo
HTML5移动开发
浏览量:138059
社区版块
存档分类
最新评论

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

 
阅读更多

转自: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属性一样,这里就不赘述了。

分享到:
评论
1 楼 spqin 2015-09-06  

相关推荐

    百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层

    1. **事件机制**:百度地图API提供了类似于DOM事件的事件机制,允许开发者监听和响应地图上的各种交互事件,如点击、拖动等。通过`addEventListener`和`removeEventListener`方法,可以添加和移除事件监听器。 2. *...

    javascript百度地图API,显示2点间通勤路线,步行,自行车,公交车,开车.zip只要指定你的经伟度坐标即可挂接上百度地图

    "百度地图API详解之地图坐标系统.url"和"百度地图API详解之公交导航 - Sup_Heaven的专栏 - 博客频道 - CSDN.NET.url"是关于地图坐标系统的参考资料,百度地图支持多种坐标系,如GCJ-02(国测局坐标)、BD-09(百度...

    百度地图API学习源代码

    **百度地图API学习源代码详解** 在现代的Web开发中,地图API的使用越来越普遍,尤其是在定位、导航、地理信息分析等领域。百度地图API作为国内主流的地图服务提供商之一,为开发者提供了丰富的功能和便捷的接口。这...

    百度地图API做的实例

    【标题】:“百度地图API做的实例” 在当前的数字化时代,地图API已经成为许多应用程序不可或缺的部分,尤其是对于地理位置相关的服务。本实例是基于百度地图API进行的二次开发,旨在展示如何利用百度地图API来构建...

    最新百度地图API Javascript V2.0 离线版本。 完全脱离百度在线地图, 有比较完善的示例Demo, 默认带有全国8级地图

    **百度地图API Javascript V2.0 离线版本详解** 在互联网地图应用开发中,百度地图API是一个不可或缺的工具,它提供了丰富的地图展示、地理定位、路线规划等功能。本资源提供的是百度地图API的Javascript V2.0离线...

    百度地图API教程 实例

    **百度地图API教程 实例** 在当今信息化社会,地图服务已经成为各类应用不可或缺的一部分。百度地图API作为国内广泛应用的地图服务提供商,为开发者提供了丰富的接口和工具,使得开发者能够轻松地将地图功能集成到...

    百度地图API实例

    【百度地图API实例详解】 百度地图API(Application Programming Interface)是百度提供的一种地图服务接口,允许开发者通过编程方式调用地图功能,将其集成到自己的网站、应用或系统中。这个API提供了丰富的地图...

    百度地图API1.4

    ### 百度地图API v1.4 知识点详解 #### 一、百度地图API简介 **百度地图API**是一套由百度公司提供的、基于JavaScript的应用程序接口,旨在帮助开发者在其网站上构建具备丰富功能及高度交互性的地图应用程序。通过...

    百度地图API自己的小应用

    1. **百度地图API**:百度地图API是一套JavaScript接口,支持在网页上嵌入地图,实现地图的加载、缩放、平移等功能,并且可以添加标注、路径规划、地理编码等高级功能。 2. **API调用**:开发者通过在网页中引入...

    百度瓦片地图和API

    关于百度地图API,它主要分为JavaScript API、Web服务API和移动SDK等几类。JavaScript API是用于网页开发的主要工具,允许开发者在网页中嵌入交互式地图,包括定位、标注、路线规划等功能。Web服务API则提供了一系列...

    百度地图API开发demo

    【百度地图API开发demo】是基于百度地图服务的示例应用,它展示了如何利用百度地图API实现各种功能,包括实时图标变换、地点搜索以及点击标注点后弹出信息窗口等交互操作。这篇详解将深入剖析这些核心知识点。 首先...

    百度地图API教程+案例

    **百度地图API教程+案例详解** 在现代互联网应用中,地图服务已经成为不可或缺的一部分,而百度地图API则为开发者提供了一套强大的工具,用于集成地图功能到自己的网站或应用程序中。本教程结合实例,旨在帮助新手...

    BaiduMapApi_All_iOS_1.2.2 百度地图API下载

    《百度地图API在iOS开发中的应用详解》 百度地图API是开发者进行地图应用开发的重要工具,尤其在iOS平台上,它提供了丰富的功能,帮助开发者构建出高效、精准的地图应用。本次我们关注的是"BaiduMapApi_All_iOS_...

    百度地图 API1.3 API1.3 开发指南 开发指南 开

    ### 百度地图API1.3开发指南精解 #### 一、百度地图API概览 百度地图API1.3是一套专为开发者设计的工具包,旨在利用JavaScript语言为网站和应用程序添加丰富的地图功能。它不仅涵盖了地图基础功能的接口,如定位、...

    百度地图JS api Demo

    **百度地图JS API Demo详解** 在现代Web应用中,地图服务已经成为不可或缺的一部分,...在实际开发中,记得根据项目需求选择合适的功能,优化性能,同时遵循百度地图API的使用规范,以确保服务的稳定性和用户体验。

    百度地图API说明

    ### 百度地图API知识点详解 #### 一、百度地图JavaScript API概览 百度地图JavaScript API是百度在线网络技术有限公司提供的一系列Web开发接口,旨在帮助开发者在其网站或应用程序中集成百度地图服务,构建功能...

    百度地图静态地图API

    ### 百度地图静态地图API详解 #### 一、简介 百度地图静态地图API是一种无需使用JavaScript或加载任何动态页面就能将地图图片嵌入到网页中的便捷方式。它通过简单的HTTP请求来创建并返回地图图片,使开发者能够...

    百度地图离线函数API

    4. **其他常用函数**:除了基本的地图操作,百度地图API还提供了许多其他功能,如标注、信息窗口、自定义图层等。例如,添加一个标注: ```javascript var marker = new BMap.Marker(new BMap.Point(116.404, 39....

    百度离线地图 API v1.3开发指南

    **百度离线地图API v1.3开发指南详解** 在移动应用和Web开发中,地图功能已经成为不可或缺的一部分。为了提供高效、稳定且节省流量的服务,百度推出了离线地图API v1.3,允许开发者在没有网络连接的情况下也能实现...

Global site tag (gtag.js) - Google Analytics