解决vue2与Vue3的本地图片在百度地图做自定义图标出现异步问题

在Vue2中,通过newBMapGL.Icon引用图片创建图标,然后用这个图标创建Marker并添加到BMapGL地图上。在Vue3中,使用import.meta.url结合newURL来引用图片,过程相似,同样创建自定义地图图标。
摘要由CSDN通过智能技术生成

vue2:

var myIcon = new BMapGL.Icon(require("../assets/images/map/icon4.png"), new BMapGL.Size(40, 40));//引用图标

 vue3

const imgUrl = new URL('./images/icon4.png', import.meta.url).href //引用图标
var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(40, 40));
var marker = new BMapGL.Marker(new BMapGL.Point(item.lon, item.lat), { icon: myIcon });//自定义图标
map3D.value.addOverlay(marker);//添加到地图上

对于您提到的问题,我可以给出一些建议。首先,关于路径查询中出现问题,您可以尝试使用其他地图服务提供商的API,比如高德地图或谷歌地图,以获得更准确的路径规划结果。其次,关于道路上自动生成的路桩图标不等距和数量不足的问题,您可以尝试手动添加路桩图标,以确保它们的位置和数量符合您的需求。您可以使用百度地图自定义覆盖物功能来实现这一点。最后,关于代码优化的建议,您可以考虑使用异步加载地图的方式,以提高页面加载速度,并且在地图初始化时只加载必要的功能和控件,以减少不必要的资源消耗。希望这些建议对您有帮助。 #### 引用[.reference_title] - *1* [Vue中使用百度地图路径分析并根据起终点坐标模拟道路里程桩](https://blog.csdn.net/L863683305/article/details/105169930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue结合百度地图api实现地址检索、路线规划等功能](https://blog.csdn.net/weixin_52641692/article/details/122646517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值