加载方法
最近在使用Vue开发百度地图功能,首先就碰到了百度地图Api如何引入的问题,查了查,网上有N种加载方案,简单梳理了下,大体可以分为以下三种:
一、简单粗暴直接引入法
第一步、在index.html中添加百度地图api的script引用
<script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图秘钥"></script>
第二步、在webpack.base.config.js配置文件中新增百度地图的扩展属性
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
// 新增百度地图的扩展属性--start--
externals: {
'BMap': 'BMap'
},
// 新增百度地图的扩展属性--end--
}
第三步、引用百度地图api模块
import BaiduMap from 'BaiduMap'
export default {
name: 'baiDuMap',
.....
到此,就可以进行百度JSApi的开发了。
二、Vue依赖引入法
第一步、在Vue项目中安装百度地图依赖模块
npm i --save vue-baidu-map
npmjs官网还有另外一个百度模块:baidu-map,有兴趣可以自己试一试
第二步、在main.js文件中全局引入百度地图模块
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你的百度地图ak秘钥'
})
第三步、使用
<baidu-map :map-type="mapType" :center="{lng: 116.404, lat: 39.915}" >
</baidu-map>
三、动态加载法
第一步、单独新建一个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'
export default{
methods: {
initMap(){
loadBMap('你的百度地图ak密钥').then(() => {
// 创建Map实例
this.map= new BMap.Map('mapDivId')
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12)
}).catch(err => {
console.log(err)
})
}
}
}
总结
第一种方法相当于全局加载百度api.js文件,不管你的页面用不用,我都给你加上一个百度地图api的引用;
第二种方法也是全局引用,不同之处在于它是通过nodejs全局引入了百度地图依赖模块;它是不管你用不用用哪些功能模块,比如你只用百度地图基础功能模块,它会连百度地图聚合等等模块都给你加载上。另外,百度地图的vue依赖版本目前好像是2.0,这会导致百度地图有些功能无法使用。
相比较前两种方法,第三种方法的加载方式是最好的。它既实现了百度地图api的异步加载,又实现了百度地图模块的按需加载。
在此特别感谢:攸宁·未央 同学的分享