vue中使用高德地图

npm安装一下依赖：npm install vue-amap --save
没有key的要去高德控制台里面去申请一个：https://lbs.amap.com

这里的使用方法没有像其他文章的那样，先引入，然后再Vue.use(AMap)

1、在项目的index.html中引入

<script src="https://webapi.amap.com/maps?v=1.4.7&key=你申请的key写在这里&plugin=AMap.CitySearch,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

2、在你的组件中
直接通过window.AMap来进行渲染

asyncLoadFile 是一个异步加载文件的方法，这样做是为了防止出现：xxxxxxxxxxxxxxxdefault.a.Map is not a constructor"的错误

原因在于有一部分代码没有执行完毕。这是因为amap js里面有一部分是异步加载的，或者是我们在js中手动加载amap js导致的

<template>
  <div class="main-wrapper-container">
    <div id="mapContainer" class="map-container"></div>
  </div>
</template>

<script>
  const url = 'https://webapi.amap.com/maps?v=1.4.7&key=c1f9b92cfc1b69e2a0b24128a23d40ca&plugin=AMap.CitySearch,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder'
  import asyncLoadFile from '@utils/asyncLoadFile'
 
  export default {
     
    data () {
     
      return {
     
        Map: '',
      }
    },

    components: {
     },

    mounted() {
     
        asyncLoadFile(url, window.AMap, err => {
     
            if (err) {
     
                return this.$message.warning('加载地图失败')
            }
            this.initMap()
        })
    },

    methods: {
     
        initMap() {
     
            this.map = new window.AMap.Map('mapContainer', {
     
                resizeEnable: true, //是否监控地图容器尺寸变化
                resizeEnable: true,
                zoom: 12
            })
        }
    }
  }

</script>
<style scoped>
.map-container {
     
    height: 100%;
}
</style>

3、效果