vue中使用高德地图

.获取高德地图的key

1>打开高德地图
2>点击开放平台
3>注册登录
4>点击控制台，进入应用管理，我的应用，创建应用，获得key

.在vue中使用

1>安装npm

npm i @amap/amap-jsapi-loader --save

2>在vue中使用

<template>
  <div>
    <div id="container">
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'GaodeMap',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      AMapLoader.load({
        key: '',
        version: '2.0',
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer']
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 13,
          center: [103.726181, 36.076525]
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>
 #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

提示: key:",填写的是自己的key
zoom 是放大倍数
center是坐标(可在高德地图-开放平台-开发支持-坐标拾取器中输入公司名称,即可获取
高德地图在vue中使用网址

https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1