vue高德地图JSAPI

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/