因为有一个项目需要使用百度地图,所以再次说一下自己的踩坑历程。
由于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等相关方法使用了。
其实这种方法还是很不理想,但是就功能性而言是实现了效果。不知道有没有遇到我这样的情况,如果有的话真的麻烦讲一下了!