vue调用高德地图

1、申请高德地图key

地址：https://lbs.amap.com/dev/key/app

2、在index.html页面引入cdn

 

3、在地图组件的页面引入Amap

<template>
  <div>
    <div id="container" style="width:100%; height:900px"></div>
  </div>
</template>

<script>
  import AMap from 'AMap'
  export default {
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
        const map = new AMap.Map('container', {
          center: [116.397428, 39.90923],
          resizeEnable: true,
          zoom: 10
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
      }
    }
  }
</script>

4、效果