vue中异步加载百度地图及相关资源
官网加载百度地图基础API都是index.html直接加script,包括点聚合API也是这种方式。
但实际应用中,有时候只有一个页面需要到百度地图,没必要全局都加载百度地图的文件,会增加负担.
因此介绍vue中如何异步加载百度地图及其相关资源(比如百度地图的点聚合API也需要加载进来js文件)
我们来对比一下:
一般加载:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<title>广告监测管理平台</title>
<!-- 引入百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=z3hBXpZTgyS1PEZNnXenHdxmfryS6S7V&s=1">
</script>
<!-- 引入百度地图的点聚合API -->
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js">
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js">
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
异步加载:
单独新建一个js文件:loadBMap.js,名字随意取,位置可以随便放
//loadBMap.js
/**
* @description 加载百度地图相关资源js
* @param {string} ak
*/
export default function loadBMap (ak) {
return new Promise((resolve, reject) => {
//聚合API依赖基础库,因此先加载基础库再加载聚合API
asyncLoadBaiduJs(ak)
.then(() => {
//调用加载第三方组件js公共方法加载其他资源库
//加载聚合API
///MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
asyncLoadJs('http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js')
.then(() => {
asyncLoadJs('http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js')
.then(() => {
resolve()
return true
})
.catch(err => { reject(err) })
})
.catch(err => { reject(err) })
})
.catch(err => {
reject(err)
})
})
}
/**
* @description 加载百度地图基础组件js
* @param {string} ak
*/
export function asyncLoadBaiduJs (ak) {
return new Promise((resolve, reject) => {
// window.onload = function () {
// resolve(BMap)
// }
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function () {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
/**
* @description 加载第三方组件js公共方法
* @param {string} url
*/
export function asyncLoadJs (url) {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.head.appendChild(script)
script.onload = () => {
resolve()
}
script.onerror = reject
})
}
然后再需要使用的地方直接import引用即可
import loadBMap from './loadBMap.js'
loadBMap('你的百度地图的密钥')
.then(() => {
// 百度地图API功能
this.myMap = new BMap.Map('自己设置的DOM ID')
// 创建Map实例
this.myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
// 初始化地图,设置中心点坐标和地图级别
})
.catch(err => { console.log(err) }) }
举个完整vue页面例子
<template>
<div class="map-area" :id="mapId"></div>
</template>
<script>
import loadBMap from './loadBMap.js'
export default {
data() {
return {
mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
myMap: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
loadBMap('你的百度地图的密钥')
.then(() => {
// 百度地图API功能
this.myMap = new BMap.Map(this.mapId) // 创建Map实例
this.myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
this.myMap.addControl(
new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
})
)
this.myMap.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
this.myMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
//添加marker等
//...
//调用点聚合方法
//....这里不再描述,正常使用
})
.catch(err => {
console.log('地图加载失败')
})
}
}
}
</script>
<style scoped>
.map-area {
width: 100%;
height: 500px;
}
</style>