百度地图添加 标示——默认、自定义(小狐狸)标示

百度地图添加 标示——默认、自定义(小狐狸)标示

原文:
百度地图添加 标示——默认、自定义(小狐狸)标示

一、简介

  所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

地图API提供了如下几种覆盖物:

Marker:标注表示地图上的点,可自定义标注的图标。

Label:表示地图上的文本标注,您可以自定义标注的文本内容。

  可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。

二、添加简单标注

  标注表示地图上的点。API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和 MarkerOptions(可选)。注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性 修改标定位置。

下面的示例向地图中心点添加了一个标注,并使用默认的标注样式。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

 

  可以通过设置标注是跳动

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

 

百度地图添加 标示——默认、自定义(小狐狸)标示

 

 

三、自定义标注图标

  通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置,您也可以使用marker.setIcon()方法。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {
    width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>设置点的新图标</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    
    //创建小狐狸
    var pt = new BMap.Point(116.417, 39.909);
    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));  //定义自己的标注
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    map.addOverlay(marker2);              // 将标注添加到地图中
</script>

 

    百度地图添加 标示——默认、自定义(小狐狸)标示

 

四、可托拽的标注

  marker的enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽,您需要调 用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后,您可以监听标注的dragend事件来捕获拖拽后标注的最 新位置。

marker.enableDragging(); //设置其可拖拽   
marker.addEventListener("dragend", function(e){    
 alert("当前位置:" + e.point.lng + ", " + e.point.lat);    
})

 

 

五、内存释放

在API 1.0版本中,如果您需要在地图中反复添加大量的标注,这可能会占用较多的内存资源。如果您的标注在移除后不再使用,可调用 Overlay.dispose()方法来释放内存。注意在1.0版本中,调用此方法后标注将不能再次添加到地图上。自1.1版本开始,您不在需要使用此 方法来释放内存资源,API会自动帮助您完成此工作。

例如,您可以在标注被移除后调用此方法:

map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不需要这样调用

 

 

ps:最基础知识可看:http://www.cnblogs.com/0201zcr/p/4679444.html  ,感谢您的耐心阅读!

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109381.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python 递归深度

    python 递归深度python对于递归深度有默认的设置,当递归层数过深,超过1000时,会报错RecursionError:maximumrecursiondepthexceededwhilecallingaPythonobject可以通过如下设置:importsyssys.setrecursionlimit(1200)手动设置递归深度,测试后发现,最大上限在8

    2022年6月22日
    68
  • 电脑使用小技巧_电脑的简单使用方法

    电脑使用小技巧_电脑的简单使用方法摘自龙族论坛的一些电脑小技巧XP提速超级迷你技巧面对越来越慢的机器,辱骂微软或是Intel都是徒劳,我在如意中,发现了一个小的不能再小的技巧:0&&image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}”>新建一个账号,最好是系统管理员,然后登录试试,速度是不

    2022年10月8日
    2
  • activiti7实战教程(二)作图「建议收藏」

    activiti7实战教程(二)作图「建议收藏」IDEA:2018.2.2插件:actibpm新建BPMN文件依次拖出需要的组件,最好按照流程的顺序进行拖出,这样后面看xml的时候比较直观。修改每个节点的名称填写每个审批节点的伪码:科室长、分管领导、采购人员、以及网关的伪码表达式这样流程图就做好了。接下来要根据流程图生成XML文件和png图片复制一份流程图,修改名称:后缀名加上20.xml在xml文件上右键到此为止,整个流程图作图就完整的结束了。另外呢告知一点,流程图…

    2022年7月21日
    34
  • eagleeye_EagleEye简介:户外视频监控分析和面部识别软件

    eagleeye_EagleEye简介:户外视频监控分析和面部识别软件eagleeye我还进行了大量研究,并使用各种机器学习方法开发了该软件系统。我已经在这个项目上花费了大约一年的时间,以为当地的州政府实施这项技术。不幸的是它没有实现。但是我有兴趣为开源社区做出贡献。它可以准确地识别,分割和识别视频源中的对象(视频源中人的92种语义属性)。最有趣的部分是我们对来自街头闭路电视摄像机的野外镜头的面部识别的准确性。EagleEye是基于真实人工智能的…

    2022年8月16日
    5
  • 临界区保护_临界地带

    临界区保护_临界地带1临界区保护1.1问题引入首先看一下如下问题:原因分析:根本原因在于读-改-写过程中随时会被打断,再恢复运行时写,导致打断过程中其它写的效果被覆盖。1.2临界区概念临界区的概念如下:临界区指的是访问多个任务共享资源的一段代码。当有任务进入临界区时,其它任务必须等待直至该任务离开临界区,以确定共享资源的访问不会冲突。由于共享资源的访问存在于任务与任务之间、任务与中断I…

    2025年6月21日
    2
  • Java学习路线总结(思维导图篇)

    Java学习路线总结(思维导图篇)????Java学习路线:搬砖工逆袭Java架构师????简介:Java领域优质创作者????、CSDN哪吒公众号作者✌、Java架构师奋斗者????????扫描主页左侧二维码,加入群聊,一起学习、一起进步????欢迎点赞????收藏⭐留言????前情提要无意间听到领导们的谈话,现在公司的现状是码农太多,但能独立带队的人太少,简而言之,不缺干活的,缺PM。也许这也是这个行业的现状,也是传说中的“35岁危机”的最好解释,如果你马上35岁了,但是你能干的,毕业生也能

    2022年5月17日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号