vue 高德地图JSAPI

使用vue-amap
使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/)

npm install vue-amap --save

在main.js中引入vue-amap

import VueAMap from 'vue-amap'
Vue.use(VueAMap)VueAMap.initAMapApiLoader({key: '高德地图申请的key',plugin: [//高德地图扩展插件(按需添加)'AMap.Autocomplete', // 输入提示插件'AMap.PlaceSearch', // POI搜索插件'AMap.Scale', // 右下角缩略图插件 比例尺'AMap.OverView', // 地图鹰眼插件'AMap.ToolBar', // 地图工具条'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制'AMap.PolyEditor', // 编辑 折线多，边形'AMap.CircleEditor', // 圆形编辑器插件'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置],uiVersion: '1.1', // ui库版本，不配置不加载,v: '2.0'
})

只需要vue-amap提供的功能请参照https://elemefe.github.io/vue-amap/#/

使用高德官网JSAPI
安装vue-amap，步骤同上
在需要使用高德地图的页面引入lazyAMapApiLoaderInstance，详细功能参考https://lbs.amap.com/