加载方法

最近在使用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的开发了。

参考转载文档1；参考转载文档2

二、Vue依赖引入法

第一步、在Vue项目中安装百度地图依赖模块

npm i --save vue-baidu-map

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>

参考转载文档2

三、动态加载法

第一步、单独新建一个js文件：loadBMap.js

//loadBMap.js/*** @description 加载百度地图相关资源js* @param {string} ak*/
export default function loadBMap (ak) {return new Promise((resolve, reject) => {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() => {      //调用加载第三方组件js公共方法加载其他资源库//加载聚合API///MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.jsasyncLoadJs('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 = rejectdocument.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 = urldocument.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) })}}
}

参考转载文档3

总结

第一种方法相当于全局加载百度api.js文件，不管你的页面用不用，我都给你加上一个百度地图api的引用；

第二种方法也是全局引用，不同之处在于它是通过nodejs全局引入了百度地图依赖模块;它是不管你用不用用哪些功能模块，比如你只用百度地图基础功能模块，它会连百度地图聚合等等模块都给你加载上。另外，百度地图的vue依赖版本目前好像是2.0，这会导致百度地图有些功能无法使用。

相比较前两种方法，第三种方法的加载方式是最好的。它既实现了百度地图api的异步加载，又实现了百度地图模块的按需加载。

在此特别感谢：攸宁·未央同学的分享

解锁Vue百度地图加载的N种姿势相关推荐

cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
百度地图加载不出来，问题根源在SHA1
最近做的项目用到了百度地图,结果开发过程中一切正常,但是最后打包的程序的地图却加载不出来,尝试了好多办法,最后还是没有成功.最后找出来问题的根源,都是SHA1惹的货. 首先获取SHA1,这里推荐两种办 ...
华为手机android7.0应用中百度地图加载不出来解析包时出现问题
第一次写博客,写的不好请各路大神多多海涵. 之前写的app在华为手机上出现了问题,android版本是7.0.据统计,android7.0和7.1的市场份额分别是:安卓7.0的份额为0.5%,安卓7. ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
百度地图加载海量标注性能优化策略
在上一篇博客中关于Vue表单验证的话题里,我提到了这段时间在做的城市配载功能,这个功能主要着眼于,如何为客户提供一条路线最优.时效最短.装载率最高的路线.事实上,这是目前物流运输行业智能化.专业化的一 ...
百度地图加载空白颜色_详细解析百度收录和百度排名关系
虽然很多人说收录和排名没有很大的关系,包括百度官方也是这样说的,但总而言之,要想排名,必须要先收录,所以百度收录和百度排名是有直接关系,并且关系还不小,那么今天我来教大家用几个小方法,可以解决网站快速 ...
百度地图加载过慢问题
参考百度的建议: 常见问题7.标注过多时,地图在IE中速度会下降,尤其是IE6.如何解决? 回复: 标注数据量请控制在150个以内,以保持高性能. 标注数量在260以内,可以使用自定义覆盖物实现. 标 ...
swift 百度地图加载与百度地图电子围栏加载
最近在写百度地图电子围栏加载,研究源码,也花了一些时间. 1.百度电子围栏整体思路 1)用户创造实体,赋予监控权限 2)对该实体创造电子围栏,有服务端和本地端两种方式,先创造实体,上传到的服务器中.在 ...
java百度地图离线LBS_Web版百度地图加载离线瓦片
注:本文参考网络教程,瓦片也是通过网络下载.向原作者致敬!原作地址:http://download.csdn.net/download/dkm8873/9233731 原作版本已久,由于代码混淆压缩, ...

解锁Vue百度地图加载的N种姿势

加载方法

一、简单粗暴直接引入法

二、Vue依赖引入法

三、动态加载法

总结

解锁Vue百度地图加载的N种姿势相关推荐

最新文章

热门文章