vue使用高德地图

导入高德地图的js

vue组件中直接script标签不起效,需要自定义一个导入js的组件

在需要使用地图的组件中使用该组件

初始化地图

在mounted生命周期方法添加onload事件

window.onload = () => {
    this.initMap()
}

initMap方法

initMap() {
      let map = new window.AMap.Map("container", {
        zoom: 12,
        center: [经度, 纬度],
        mapStyle: "自己定义地图的样式(可选)",
      })

      // 创建marker
      let marker = new window.AMap.Marker({
        icon: imgUrl,
        position: new window.AMap.LngLat(经度, 纬度),
        extData: {
          markerId: '',
        },
      })

      map.add(marker)

      marker.on("click", () => {
        console.log(marker.getExtData())
      })
    },