百度地图API 自定义标注图标

编程入门 行业动态 更新时间:2024-10-24 05:17:27

百度地图API <a href=https://www.elefans.com/category/jswz/34/1771438.html style=自定义标注图标"/>

百度地图API 自定义标注图标

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

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.323066,39.989956), 16);  // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl());   //添加地图类型控件map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var points = [[116.316967,39.990748],[116.323938,39.989919],[116.328896,39.988039],[116.321135,39.987072],[116.332453,39.989007],[116.324045,39.987984],[116.322285,39.988316],[116.322608,39.986381]];// 向地图添加标注for( var i = 0;i < points.length; i++){var myIcon = new BMap.Icon(".png", new BMap.Size(23, 25), {// 指定定位位置offset: new BMap.Size(10, 25),// 当需要从一幅较大的图片中截取某部分作为标注图标时,需要指定大图的偏移位置   imageOffset: new BMap.Size(0, 0 - i * 25) // 设置图片偏移  });var point = new BMap.Point(points[i][0],points[i][1]);// 创建标注对象并添加到地图 var marker = new BMap.Marker(point,{icon: myIcon});map.addOverlay(marker);};</script>

所使用图片:

演示地址:点击

作者:itmyhome

更多推荐

百度地图API 自定义标注图标

本文发布于:2023-06-13 00:00:54,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/670295.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:自定义   图标   地图   API

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!