百度地图
百度地图作为项目中地图可视化最重要的一部分,不止其为国人自己的地图,还因为其完善的技术文档案例和多样化的开源插件(echarts、Mapv等)github上有vue-baidu-map的组件可以直接使用,有兴趣的同学可以直接上手
https://github.com/Dafrok/vue-baidu-map.git
这里不采用已经封装好的地图组件,而是从零开始,采用原生的百度地图api,一步步组合封装
- 项目引入地图
网上教程多数为index.html加入百度地图api,然而这种写法并不符合我们的组件化思想,我的思想是先抽取百度地图为单独组件.vue,在需要地图的业务中加载
baiduMap.vue
// 初始化
reset () {
const {getMapScript, initMap} = this
getMapScript().then(initMap)
},
// 获取baidumap
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