在vue项目中用BMap百度地图自定义定位icon不显示

jieyucx

于 2023-03-31 12:16:20 发布

阅读量2.4k

点赞数 1

分类专栏：百度地图文章标签： vue.js 百度 javascript

本文链接：https://blog.youkuaiyun.com/jieyucx/article/details/129877116

版权

百度地图专栏收录该内容

8 篇文章

订阅专栏

在使用百度地图API时，创建自定义图标并尝试添加到地图上不显示。问题出在缺少了设置图标尺寸的方法`setImageSize`。正确做法是，在创建Icon后，通过`myIcon.setImageSize(newBMap.Size(32,32))`设置图标尺寸，然后创建Marker并添加到地图中，这样图标就能正常显示了。

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

我自定义了图标但是不显示，先来看一下怎么用百度地图自定义图标

          var myIcon = new BMap.Icon( // 自定义图标
            require("../../../assets/image/L.gif"),
            new BMap.Size(24, 21) // 图标的宽度和高度
          );

          var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
          that.map.addOverlay(marker); // 将标注添加到地图中

我这么自定义之后地图上不显示。
最后查阅官方文档，还需配合setImageSize使用

myIcon.setImageSize(new BMap.Size(32,32));

加上这一句就可以了如下：

          var myIcon = new BMap.Icon( // 自定义图标
            require("../../../assets/image/L.gif"),
            new BMap.Size(24, 21) // 图标的宽度和高度
          );
          myIcon.setImageSize(new BMap.Size(32,32));
          var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
          that.map.addOverlay(marker); // 将标注添加到地图中