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/