HTML5学习---百度地图修改Marker图标大小的方法

最新推荐文章于 2024-09-04 16:44:43 发布

置顶啊哈程序

最新推荐文章于 2024-09-04 16:44:43 发布

阅读量4.4w

点赞数 1

分类专栏： web前端学习 web前端

本文链接：https://blog.csdn.net/yuexianchang/article/details/51240124

版权

web前端学习同时被 2 个专栏收录

12 篇文章

订阅专栏

web前端

12 篇文章

订阅专栏

本文介绍如何使用百度地图API自定义地图图标，并提供了一段示例代码来展示如何加载自定义图标并将其应用于地图标记上。此外还讨论了自定义样式的复杂性和替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

    offset: new BMap.Size(10, 25),

    imageOffset: new BMap.Size(0, 0 - index * 25)

  });

  var marker = new BMap.Marker(point, {icon: myIcon});

  map.addOverlay(marker)

这是引用百度自己的标注，看明白了没有，这个小标注的字不是加上去的，而本身就是一张图，连在一块的。想自定样式的话可以自己制作并切图，这样考验你的CSS了，总之很烦的。个人觉得直接引用百度的就可以了。

完整代码：

</pre><pre name="code" class="html">var map = new BMap.Map("map"); // 创建地图实例   
var point = new BMap.Point(116.404, 39.915); // 创建点坐标   
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别  
 
map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());     
map.setDefaultCursor("crosshair");
map.addEventListener("click", function(e){   //点击事件  
    if(!e.overlay){
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25), // 指定定位位置
                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                    });
        var marker=new BMap.Marker(e.point,{icon:myIcon});
        map.removeOverlay(preMarker);
        map.addOverlay(marker);
        preMarker=marker;
    }
});