VUE中如何異步加載百度地圖API
有問題請留言，趕工中，不能拆分整理
本文前提是你對vue有所了解铭乾，且對百度地圖API有所了解
引用百度地圖有2種方式送膳，全局加載或異步加載（需要的時(shí)候）
- 在入口
index.html中引入百度地圖
2.使用promise寫入到DOM中
這2種方式都需要將地圖BMap對象放到global中使用
思路
掛載百度地圖漱凝，將BMap放到global中
初始化地圖，this.map = new BMap.Map($el) 姿锭，并綁定 ready事件
提供center marker屬性，用于重置中心和點(diǎn)覆蓋物
參考代碼
src/components/baidu-map.vue
<template>
<div ref="map" class="baidu-map"></div>
</template>
<script>
export default {
props: {
zoom: {
type: Number,
default: 15
},
center: {
type: [Object, String],
default () {
return {lng: 116.404, lat: 39.915}
}
},
marker: {
type: [Object, String],
default () {
return {lng: 116.404, lat: 39.915}
}
},
search: ''
},
data: () => ({
ak: 'okFNZHPQ0BfF9Qhq3K1WmrRv',
BMap: {},
map: {},
currentPosition: null
}),
methods: {
init (BMap) {
let $el = this.$refs.map
const map = new BMap.Map($el)
this.map = map
// 初始化中心位置
const {getCenterPoint, zoom} = this
map.centerAndZoom(getCenterPoint(), zoom || 15)
this.setMarker(this.marker)
this.$emit('ready', {BMap, map})
},
// 初始化地圖
initMap (BMap) {
this.BMap = BMap
this.init(BMap)
},
// 加載百度地圖API
getMapScript () {
if (!global.BMap) {
const ak = this.ak || this._BMap().ak
global.BMap = {}
global.BMap._preloader = new Promise((resolve, reject) => {
global._initBaiduMap = function () {
resolve(global.BMap)
global.document.body.removeChild($script)
global.BMap._preloader = null
global._initBaiduMap = null
}
const $script = document.createElement('script')
global.document.body.appendChild($script)
$script.src = `//api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
})
return global.BMap._preloader
} else if (!global.BMap._preloader) {
return Promise.resolve(global.BMap)
} else {
return global.BMap._preloader
}
},
// 地圖中心點(diǎn)
getCenterPoint () {
const {center, BMap} = this
switch (typeof center) {
case 'string':
return center
case 'object':
return new BMap.Point(parseFloat(center.lng), parseFloat(center.lat))
default: return new BMap.Point(116.404, 39.915)
}
},
// 設(shè)置中心點(diǎn)
setCenter () {
const {map, getCenterPoint} = this
map.setCenter(getCenterPoint())
},
// 設(shè)置Marker
setMarker (p) {
const {map, BMap} = this
map.clearOverlays() // 清除地圖上所有覆蓋物
const marker = new BMap.Marker(new BMap.Point(parseFloat(p.lng), parseFloat(p.lat))) // 創(chuàng)建標(biāo)注
map.addOverlay(marker) // 將標(biāo)注添加到地圖中
marker.enableDragging() // 可拖拽
marker.addEventListener('dragend', () => {
var p = marker.getPosition()
this.currentValue = {
lng: p.lng,
lat: p.lat
}
})
},
// 獲取當(dāng)前坐標(biāo)
getCurrentPosition (callback) {
const { BMap } = this
var _this = this
let geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() === global.BMAP_STATUS_SUCCESS) {
_this.currentPosition = r.point
callback(r)
} else {
callback(false)
}
}, {enableHighAccuracy: true})
},
// 初始化附近
initNearby (callback) {
const { BMap, currentPosition, getCurrentPosition } = this
var geoc = new BMap.Geocoder()
if (!currentPosition) {
getCurrentPosition(response => {
let point = new BMap.Point(parseFloat(response.point.lng), parseFloat(response.point.lat))
geoc.getLocation(point, function (results) {
callback(results.surroundingPois)
}, {
poiRadius: 10 * 1000,
numPois: 10
})
})
} else {
let point = new BMap.Point(parseFloat(currentPosition.lng), parseFloat(currentPosition.lat))
geoc.getLocation(point, function (results) {
callback(results)
})
}
},
// 獲取周邊信息
searchNearby (key, callback) {
const { BMap, map, currentPosition, getCurrentPosition } = this
var options = {
onSearchComplete: results => {
if (local.getStatus() === global.BMAP_STATUS_SUCCESS) {
var rel = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
rel.push(results.getPoi(i))
}
callback(rel)
}
}
}
var local = new BMap.LocalSearch(map, options)
if (!currentPosition) {
getCurrentPosition(response => {
let point = new BMap.Point(parseFloat(response.point.lng), parseFloat(response.point.lat))
local.searchNearby(key, point, 20 * 1000)
})
} else {
let point = new BMap.Point(parseFloat(currentPosition.lng), parseFloat(currentPosition.lat))
local.searchNearby(key, point, 20 * 1000)
}
}
},
created () {
const {getMapScript, initMap} = this
getMapScript().then(initMap) // 加載地圖接口伯铣，并初始化地圖
}
}
</script>
<style>
.baidu-map {
width: 100%;
height: 200px;
border: 1px solid #eee;
}
</style>
@/tools/util.js
export function looseEqual (a, b) {
// eslint-disable-next-line eqeqeq
return a == b || (
isObject(a) && isObject(b) ? JSON.stringify(a) === JSON.stringify(b) : false
)
}
@/demo/map.vue
<template>
<div>
<div class="panel">
<baidu-map ref="baiduMap" @ready="initNearby"></baidu-map>
</div>
<div class="panel wrapper">
<button class="btn btn-custom" @click="getCurrentPosition">獲取當(dāng)前坐標(biāo)</button>
坐標(biāo)：{{position}}
</div>
<div class="panel wrapper">
<div class="input-group">
<input type="text" class="form-control" v-model="nearbyKey">
<span class="input-group-btn">
<button class="btn btn-default" type="button" @click="searchNearby">搜索周邊</button>
</span>
</div>
<div class="list-group list-group-unstyle m-t">
<div class="list-group-item" v-for="item in nearby">
<div class="text-lg">{{item.title}}</div>
<div class="text-muted">{{item.address}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BaiduMap from '@/components/baidu-map'
export default {
components: {
BaiduMap
},
data: () => ({
position: null,
nearbyKey: null,
nearby: null
}),
methods: {
getCurrentPosition () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(response => {
if (response.coords) {
console.log(response.coords)
}
}, error => {
this.$refs.baiduMap.getCurrentPosition(response => {
this.position = response
})
return Promise.reject(error)
})
}
},
searchNearby () {
this.$refs.baiduMap.searchNearby(this.nearbyKey, response => {
this.nearby = response
})
},
initNearby () {
this.$refs.baiduMap.initNearby(response => {
this.nearby = response
})
}
}
}
</script>
