vue 调用高德地图API

一、功能：定位；精准定位；拖拽选点；编辑遮罩物；工具条

二、实现过程：

1、申请Key，我申请的是Web端（JS API），不同的API效果可能不一样

2、在index.html中引入：

3、在webpack.base.conf.js加入(预防Eslint的报错：AMap是undefined，在vue-cli3,vue-cli4配置不尽相同，可以忽略这个Eslint错误)

externals: {

    'AMap': 'AMap',

    'AMapUI': 'AMapUI'

}

4、创建一个文件：map.vue

4、效果图

进行过优化的效果图：具有搜索选址、拖拽选址、范围选址、经纬度转换为地点名称等功能：