关于Vue使用百度地图定位踩坑

因为有一个项目需要使用百度地图，所以再次说一下自己的踩坑历程。

由于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方法来进行