使用百度地图添加标注时如何使用本地图标的方法

最新推荐文章于 2023-08-04 14:09:59 发布

lh_guojw

最新推荐文章于 2023-08-04 14:09:59 发布

阅读量4.1k

点赞数 4

分类专栏：百度地图

本文链接：https://blog.csdn.net/lh_guojw/article/details/86574878

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在项目中使用百度地图时，有一个需求就是在地图中添加标注，并且要使用本地的图标，于是代码这样写

let myIcon = new BMap.Icon('./hongqi.png', new BMap.Size(15,25));
let baiduPoint = new BMap.Point(point.longitude, point.latitude);
let marker = new BMap.Marker(baiduPoint, { icon: myIcon });

map.addOverlay(marker);

但是图标不能正常显示

将图片地址换成线上地址


let myIcon = new BMap.Icon('http://192.168.5.35:8081/systemmanage/files/20190121114049705.png', new BMap.Size(15,25));
let baiduPoint = new BMap.Point(point.longitude, point.latitude);
let marker = new BMap.Marker(baiduPoint, { icon: myIcon });

map.addOverlay(marker);

图片可以正常显示。但是如果更换服务器，又要重新上传图片，重新获取图片地址，重新修改代码，甚是麻烦，于是使用require加载图片即可，代码这样写：

let myIcon = new BMap.Icon(require('./hongqi.png'), new BMap.Size(15,25));
let baiduPoint = new BMap.Point(point.longitude, point.latitude);
let marker = new BMap.Marker(baiduPoint, { icon: myIcon });

map.addOverlay(marker);

图标可以正常显示了。

看下效果效果图