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

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

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

一、简介

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

地图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)
上一篇 2021年9月8日 上午8:00
下一篇 2021年9月8日 上午9:00


相关推荐

  • H3C交换机配置命令大全

    H3C交换机配置命令大全H3C交换机配置命令大全H3C交换机################################################ 1、system-view  进入系统视图模式 2、sysname  为设备命名 3、displaycurrent-configuration当前配置情况 4、language-modeChinese|English…

    2022年6月20日
    36
  • 轻松搞懂Word2vec / FastText+BiLSTM、TextCNN、CNN+BiLSTM、BiLSTM+Attention实现中英文情感分类

    轻松搞懂Word2vec / FastText+BiLSTM、TextCNN、CNN+BiLSTM、BiLSTM+Attention实现中英文情感分类前言讲道理,这篇博客应该可以帮助很多只有一点点NLP的朋友,在较短的时间内了解文本分类的整个过程并用代码复现整个流程。事先说明,这里大家先不要过分要求自己去理解整个模型的原理,先搞清楚整个实现流程,体验一下敲代码并成功应用的快感。实现流程找数据集首先第一步,就是要找好数据集,没有数据集模型怎么学习,怎么涨知识。那这里呢,我们采用的情感数据集是weibo_senti_100k数据集,一共有119988条带情感标注的新浪微博评论,其中正负向评论均为59994条,非常平衡的一个数据集。其中lab.

    2022年6月28日
    36
  • maven:pom文件详解

    maven:pom文件详解一 maven 项目的目录结构 pom 文件定于了一个 maven 项目的 maven 配置 一般 pom 文件的放在项目或者模块的根目录下 maven 的遵循约定大于配置 约定了如下的目录结构 目录 目的 basedir 存放 pom xml 和所有的子目录 basedir src main java 项目的 java 源代码 basedir sr

    2026年3月19日
    2
  • python 字符转数字函数_excel将字符串转数字

    python 字符转数字函数_excel将字符串转数字chr(i)数字转ascii范围的字符unichr(i)数字转unicode字符ord(c)字符转成unicode码点

    2022年10月12日
    7
  • ICEM二维网格

    ICEM二维网格非结构网格结构网格拓扑拓扑完建立part边界条件,然后创建block拓扑完后进行边界条件关联全局网格设置转载于:https://www.cnblogs.com/Jay-CFD/p/8795203.html…

    2022年5月13日
    42
  • flyweight设计模式_享元模式线程安全

    flyweight设计模式_享元模式线程安全亨元模式动机模式定义实例结构要点总结笔记。动机在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中,从而带来很高的运行时代价—主要指内存需求方面的代价如何在避免大量细粒度对象问题的同时,让外部客户仍然能够透明地使用面向对象地方式来进行操作模式定义运用共享技术有效地支持大量细粒度地对象。实例每一个字符都是一个字体 字体对象Fontclass Font{private: //unique object key string key; //object

    2022年8月11日
    5

发表回复

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

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