使用vue創建運行高德JSApi 實例

話不多說，直接上代碼：

<template>
  <div>
    <div id="panel"></div>
    <div
      :id="mapId"
      style="width:100%;height:80vh"
      class="m-map"/>
    <a-button @click="buildMarker">添加標記</a-button>
    <a-button @click="buildTools">添加工具欄</a-button>
    <a-button @click="buildDriving">路線規划</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapId: 'mapId', // 地圖id，多次調用該地圖組件時，id必須動態生成
      map: null
    }
  },
  watch: {
      // 經緯度
    point: function (val, old) {
      this.map.setCenter(val)
      this.marker.setPosition(val)
    }
  },
  mounted () {
  },
  created () {
    console.log('create begin')
    this.createMap()
    console.log('create end')
  },
  methods: {
    createMap () {
      const _this = this
      this.mapId = `map${Math.random().toString().slice(4, 6)}`
      window.onMapLoad = function () {
        console.log('window.AMap', window.AMap)
        const map = new window.AMap.Map(_this.mapId, {
          resizeEnable: true, // resizeEnable: true, //是否監控地圖容器尺寸變化
          zoom: 11, // zoom:11, //初始化地圖層級
          center: [ 116.397428, 39.90923 ]// center: [116.397428, 39.90923] //初始化地圖中心點
        })
        _this.map = map
      }
      const url = 'https://webapi.amap.com/maps?v=1.4.15&key=111222333444555666777888999486f3&callback=onMapLoad'
      const jsapi = document.createElement('script')
      jsapi.charset = 'utf-8'
      jsapi.src = url
      document.head.appendChild(jsapi)
    },
    createMapTools () {
      const self = this
      // 地圖id，多次調用該地圖組件時，id必須動態生成
      self.id = `map${Math.random().toString().slice(4, 6)}`

      // 封裝回調函數，為了防止與其他地方定義的load沖突，最好重命名，如onmaploaded
      window.onmaploaded = () => {
        // 地圖基礎控件添加，傳遞的第一個參數是DOM元素的id
        const 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', 'AMap.Driving'], () => {
          // 在圖面添加工具條控件，工具條控件集成了縮放、平移、定位等功能按鈕在內的組合控件
          const toolbar = new window.AMap.ToolBar()
          map.addControl(toolbar)

          // 創建地圖點標記：
          const 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)
          console.log('----------------------')
          // 構造路線導航類
          var driving = new window.AMap.Driving({
              map: map,
              panel: 'panel'
          })
          // 根據起終點名稱規划駕車導航路線
          driving.search([
              { keyword: '北京市地震局(公交站)', city: '北京' },
              { keyword: '亦庄文化園(地鐵站)', city: '北京' }
          ], function (status, result) {
              // result 即是對應的駕車導航信息，相關數據結構文檔請參考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                  console.success('繪制駕車路線完成')
              } else {
                  console.error('獲取駕車數據失敗：' + result)
              }
          })
        })
      }
    },
    buildMarker () {
      var marker = new window.AMap.Marker({
        position: new window.AMap.LngLat(116.39, 39.9),
        title: '北京'
      })
      this.map.add(marker)
    },
    buildTools () {
      window.AMap.plugin(['AMap.ToolBar'], () => { // 同時引入工具條插件
        // 在圖面添加工具條控件，工具條控件集成了縮放、平移、定位等功能按鈕在內的組合控件
        const toolbar = new window.AMap.ToolBar()
        this.map.addControl(toolbar)
      })
    },
    buildDriving () {
      const _this = this
      window.AMap.plugin(['AMap.Driving'], () => {
        var driving = new window.AMap.Driving({
          map: _this.map,
          panel: 'panel'
        })
        // 根據起終點名稱規划駕車導航路線
        driving.search([
          { keyword: '北京市地震局(公交站)', city: '北京' },
          { keyword: '亦庄文化園(地鐵站)', city: '北京' }
        ], function (status, result) {
            // result 即是對應的駕車導航信息，相關數據結構文檔請參考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
                console.log('繪制駕車路線完成')
            } else {
                console.log('獲取駕車數據失敗：' + result)
            }
        })
      })
    }
  }
}
</script>

以上代碼實在ant vue pro框架下調試成功，實例來源於高德地圖api官網的JS API篇。我僅僅做了一點點基於vue的運行改造。