百度地图添加 标示——默认、自定义(小狐狸)标示
一、简介
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
地图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 ,感谢您的耐心阅读!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109381.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...