created 生命周期载入高德地图API
载入的方式类似于 jquery 的脚本加载,我这里也是使用了别人封装好的一个加载方法,各位直接使用或者自己改
created () {
// 已载入高德地图API,则直接初始化地图
if (window.AMap && window.AMapUI) {
this.initMap()
// 未载入高德地图API,则先载入API再初始化
} else {
// 载入高德地图和UI组件
Promise.all([
remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`),
remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
]).then(() => {
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()
})
}
调用