因为有一个项目需要使用百度地图,所以再次说一下自己的踩坑历程。
由于Vue是单页面的,所以按需加载是最后的方法,百度也提供好了供我们使用的组件,只需要
npm install vue-baidu-map --save
就可以了。根据自己的需求可以在全局引用或者局部引用。
全局的话就在main.js中
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '' // 在此写入你在百度地图API官网中获取的ak值
});
局部的话就需要在你需要使用的组件中局部引用
import { BaiduMap, BmNavigation, BmMarker, BmGeolocation, BmScale, BmMarkerClusterer, Polyline } from 'vue-baidu-map'
这里我需要这些组件所以就引用这些。
然后就去你使用地图的组件中使用就好。
<baidu-map ak="*****" class="bd_map" :center="mapCenter" :zoom="zoom" @ready="handler">
注意:由于百度地图组件是异步的,所以我们需要等到该组件读取完成后在进行我们需要的操作。在此就需要ready方法来进行