最近项目中有使用到高德地图,搜了下发现饿了么的 vue-amap 比较知名。不过实际安装使用中发现仍是有不少问题的,并不友好。不但要学习 amap 的文档,也还要学习原生高德API文档,还不如直接使用原生来的方便。vue
而这篇教程的目的就是,怎么在vue中使用高德地图APIjquery
DEMO:vue-gaode.rxshc.com
GitHub: github.com/zuley/vue-g…git
载入的方式相似于 jquery 的脚本加载,我这里也是使用了别人封装好的一个加载方法,各位直接使用或者本身改github
async created () { // 已载入高德地图API,则直接初始化地图 if (window.AMap && window.AMapUI) { this.initMap() // 未载入高德地图API,则先载入API再初始化 } else { await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`) await remoteLoad('http://webapi.amap.com/ui/1.0/main.js') this.initMap() } }复制代码
在 methods 中建立一个 initMap 的方法供载入地图API以后调用。这里就能够使用任意高德APIweb
initMap () { // 加载PositionPicker,loadUI的路径参数为模块名中 'ui/' 以后的部分 let AMapUI = this.AMapUI = window.AMapUI let AMap = this.AMap = window.AMap AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => { let mapConfig = { zoom: 16, cityName: MapCityName } if (this.lat && this.lng) { mapConfig.center = [this.lng, this.lat] } let map = new AMap.Map('js-container', mapConfig) // 加载地图搜索插件 AMap.service('AMap.PlaceSearch', () => { this.placeSearch = new AMap.PlaceSearch({ pageSize: 5, pageIndex: 1, citylimit: true, city: MapCityName, map: map, panel: 'js-result' }) }) // 启用工具条 AMap.plugin(['AMap.ToolBar'], function () { map.addControl(new AMap.ToolBar({ position: 'RB' })) }) // 建立地图拖拽 let positionPicker = new PositionPicker({ mode: 'dragMap', // 设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap' map: map // 依赖地图对象 }) // 拖拽完成发送自定义 drag 事件 positionPicker.on('success', positionResult => { // 过滤掉初始化地图后的第一次默认拖放 if (!this.dragStatus) { this.dragStatus = true } else { this.$emit('drag', positionResult) } }) // 启动拖放 positionPicker.start() }) }复制代码
<mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>复制代码