Typecho合集站.  留言 关于 记事本 
首页 > TYPECHO > typecho教程 > typecho插件 > typecho主题 > 网站开发 > PHP > Linux > web > 编程 > 个人收藏 > 互联网旧文 > 互联网趣文

在Vue中完美的使用高德地图

项目地址:https://github.com/zuley/vue-gaode


在Vue中完美的使用高德地图

最近项目中有使用到高德地图,搜了下发现饿了么的 vue-amap 比较知名。不过实际安装使用中发现还是有很多问题的,并不友好。不但要学习 amap 的文档,也还要学习原生高德API文档,还不如直接使用原生来的方便。

而这篇教程的目的就是,怎么在vue中使用高德地图API

文档:Demo和使用文档

运行项目

# 安装依赖
npm install
# 运行项目
npm run serve

实现思路

created 生命周期载入高德地图API

载入的方式类似于 jquery 的脚本加载,我这里也是使用了别人封装好的一个加载方法,各位直接使用或者自己改

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之后调用。这里就可以使用任意高德API

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>


发表新评论


本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除
Theme by
夏目贵志, Powered by Typecho | RSS | sitemap