关于vue3:在vue3tsvite项目中用BMap百度地图自定义定位icon不显示

89次阅读

共计 675 个字符,预计需要花费 2 分钟才能阅读完成。

  1. 自定义 icon 门路,不能间接应用门路地址,须要 require 包裹

    var myIcon = new window.BMap.Icon(require("@/assets/icon.png", new window.BMap.Size(26, 32));
  2. 那么问题来了,vite+typescript 我的项目不容许应用动态资源加载办法 require,如果应用 require 关键字就会报错,那必定没法显示坐标点。
  3. 所以咱们应用 import 来解决
let imgUrl = ref('')

onMounted(async () => {let img = await import("/@/assets/41-placeholder.svg")
    imgUrl.value = img.default
}
  1. 应用
var map = new window.BMap.Map("container");          // 创立地图实例
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); // 鼠标滚动缩放
// 自定义坐标门路地址
var myIcon = new window.BMap.Icon(imgUrl.value, new window.BMap.Size(26, 32));
myIcon.setImageSize(new window.BMap.Size(26, 32))
var marker = new window.BMap.Marker(new window.BMap.Point(116.399, 39.910), {icon: myIcon});
map.addOverlay(marker);

正文完
 0