vue-cli4中如何引入高德地图

使用的是vue-cli4，首先去高德地图获取你的key。

第一步

在vue.config.js中配置

module.exports = {
    configureWebpack: {
        externals: {
            'AMap': 'AMap'
        }
    }
}

第二步

在public目录下的index.html中添加（写在body里面）

 <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

第三步

在你写的组件中创建（记得写宽高）

 <div id="container" style="width: 100%;height: 100%">

引入

import AMap from 'AMap';

在methods中初始化

 initMap: function() {
                this.map = new AMap.Map('container', {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    mapStyle: "amap://styles/darkblue"
                });
            },

在mounted中调用

 mounted() {
            this.initMap();
        },

然后就成功啦