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

客官°小女子只卖身不卖艺 2022-08-18 05:45 439阅读 0赞

通过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("http://7xic1p.com1.z0.glb.clouddn.com/markers.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>

所使用图片：

![这里写图片描述][20151209171400225]

演示地址：[点击][Link 1]

作者：[itmyhome][]

[20151209171400225]: /images/20220731/c6c1b584d9254625963f40302c130cca.png
[Link 1]: http://itmyhome.com/baidu_map_icon/
[itmyhome]: http://blog.csdn.net/itmyhome1990

发表评论取消回复

表情：

评论列表（有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API 实现地图多点标注

1.MySQL设计 2.java @RequiresPermissions("system:lmonitor:list") @PostMap

以你之姓@/ 2023年01月21日 04:26/ 0 赞/ 12 阅读

相关百度地图API调用实现获取经纬度以及标注

一、申请AK 百度搜索百度地图API，进入官网文档，按照官网文档提示注册百度账号并申请AK。[申请AK][AK] 填写相关信息，应用名称随意、应用类型根据协议来选择.

男娘i/ 2022年12月17日 15:55/ 0 赞/ 354 阅读

相关百度地图自定义窗口标注

最近做个项目,用到了地图,要在地图上显示车辆的时时信息,页面效果![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

小灰灰/ 2022年12月07日 01:21/ 0 赞/ 281 阅读

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

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

客官°小女子只卖身不卖艺/ 2022年08月18日 05:45/ 0 赞/ 440 阅读

相关 echarts3 + 百度地图API展示自定义地图

　之前一篇echarts+百度地图API实现自定义底图后，这次测试提出了bug：地图上的点可点击，弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后，还是自己研究

电玩女神/ 2022年06月10日 10:10/ 0 赞/ 523 阅读

相关百度地图API，自定义圆形头像标柱

web端基于百度地图，实现自定义圆形头像标柱 1. 项目需求基于百度地图，在当前用户的位置上，呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示：

梦里梦外;/ 2021年12月05日 14:57/ 0 赞/ 734 阅读

相关 vue 百度地图自定义样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3

今天药忘吃喽~/ 2021年10月01日 04:34/ 0 赞/ 1577 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 845 阅读

相关百度地图标注基础篇

<script type="text/javascript"> var mapObj = new BMap.Map("mapObj");

蔚落/ 2021年09月10日 05:06/ 0 赞/ 467 阅读

相关百度地图标注点、图层

[标注点地址][Link 1] [图层地址][Link 2] 标注点创建标注点对象 var 标注点对象=new BMap.标注点类型(po

超、凢脫俗/ 2021年07月24日 22:52/ 0 赞/ 716 阅读