关于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'

这里我需要这些组件所以就引用这些。

然后就去你使用地图的组件中使用就好。

注意：由于百度地图组件是异步的，所以我们需要等到该组件读取完成后在进行我们需要的操作。在此就需要ready方法来进行绑定。

 handler ({BMap, map}) {
      this.mapCenter.lng = 116.404
      this.mapCenter.lat = 39.915
      this.map = map
      this.BMap = BMap}

在这里给map和BMap赋值完以后我们就可以使用里面的方法来进行操作了。

再次地图渲染就算完成，到这我还算是顺利，但是随后的操作却让我难受了很久。由于我写了按钮需要在我移动地图后可以回到原来的位置，在这里我们定义好自己的初始点使用map.setCenter();map.panTo();map.centerAndZoom()都可以实现具体的使用看官方给的说明

但是再次我使用了这三个方法都没有实现！！map也取到相应的值方法使用也没有问题。emmmm反正就是没有解决，如果有大神知道的可以留言给我讲讲，就问题而言还没有找到为什么，但是这里有另一个方法亲测好用。

我们在index.html页面中直接导入百度地图

然后在webpack.base.conf.js文字中进行BMap的配置将其与entry放在同一级的目录里

entry: {
    app: './src/main.js'
  },
  externals: { 'BMap': 'BMap' },

然后去我们要使用的组件中定义一个div来存放地图。

      this.map = new BMap.Map('map')
      let point = new BMap.Point(116.404, 39.915)
      this.map.centerAndZoom(point, 15)

然后在js中注册map并定义其经纬度和缩放值。注意BMap.Point()可以将输入的值转换为我们需要值{lng: 116.404, lat:39.915}这种格式。然后我们就可以通过setCenter等相关方法使用了。

其实这种方法还是很不理想，但是就功能性而言是实现了效果。不知道有没有遇到我这样的情况，如果有的话真的麻烦讲一下了！