vue中使用高德地图异步加载 JS API

高德地图

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

封装为共用组件，由于每个地图都必须命名一个Id，当项目中多次调用地图子组件时，需要动态改变id

<template>
    <!-- 高德地图组件 -->
  <div
    :
    :px',height:height+'px',margin:'34px auto'}"
    class="m-map"/>
</template>

<script>
export default {
  props: {
    // 宽度
    width: {
      type:Number,
      default:300
    },
    // 高度
    height: {
      type:Number,
      default:300
    },
    // 经纬度，默认设为北京
    point: {
      type:Array,
      default(){
        return [ 116.46 , 39.92 ]
      }
    }
  },
  data() {
    return {
        //地图id，多次调用该地图组件时，id必须动态生成
      id: `map`,
      //高德地图开发者秘钥，调用接口时使用
      key: '0dbc0dfd7c775f2a927174493eab8220'
    }
  },
  watch: {
      //经纬度
    point: function (val, old) {
      this.map.setCenter(val)
      this.marker.setPosition(val)
    }
  },
  mounted() {
    let self = this
    //地图id，多次调用该地图组件时，id必须动态生成
    self.id = `map${Math.random().toString().slice(4, 6)}`

    // 封装回调函数，为了防止与其他地方定义的load冲突，最好重命名，如onmaploaded
    window.onmaploaded = () => {
      //地图基础控件添加，传递的第一个参数是DOM元素的id
      let map = new window.AMap.Map(self.id, {
        // resizeEnable: true, //是否监控地图容器尺寸变化
        // zoom:11, //初始化地图层级
        // center: [116.397428, 39.90923] //初始化地图中心点
        resizeEnable: true,
        zoom: 11,
        center: self.point
      })
      //地图图面
      self.map = map

      // 同时引入工具条插件
      window.AMap.plugin('AMap.ToolBar', () => {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        let toolbar = new window.AMap.ToolBar()
        map.addControl(toolbar)

        //创建地图点标记：
        let marker = new window.AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: self.point
        })
        self.marker = marker
        //将创建好的地图点标记控件 添加到地图map
        marker.setMap(map)
      })
    }
    //注意，此处url中传递的回调函数名，必须与上面一致
    const url = `https://webapi.amap.com/maps?v=1.4.10&key=${self.key}&callback=onmaploaded`
    let jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  },
}
</script>