vue项目中使用高德地图

最近做的项目中有个地图选择的功能，如下图所示：

所以在此记录下使用方法，望各位大神指导

我的应用 | 高德控制台第一步：去高德官网去创建一个属于自己的地图应用 （得到key和秘钥）我的应用 | 高德控制台

 这是添加的方式：

准备-入门-教程-地图 JS API | 高德地图API

第二步：获取到属于自己的key和秘钥后，下载地图高德：npm install vue-amap --save 

第三步：在main.js中导入 

VueAMap.initAMapApiLoader({
    key: '你申请的key',
    plugin: [
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PlaceSearch',
        'AMap.Geolocation',
        'AMap.Geocoder',
        'AMap.DrivingPolicy',
        'AMap.Driving',
        "AMap.Autocomplete",
   "AMap.PolyEditor",
   "AMap.CircleEditor",
    ],
    v: '1.4.4',
    uiVersion: '1.0',
})

这里的key是你申请的

第四步：在index.html页面头部 添加秘钥

​​​​​​​​​​​​​​

 以上步骤完成后，就可以去你对应的页面中使用了

因为我是写的一个组件，所以大家根据自己的情况 

我的组件完整代码：

里面都有对应的注释