当前位置: 首页 > Web前端 > vue.js

使用vue-baidu-map时找不到BMap对象报错,BMap不是defind

时间:2023-04-01 01:59:17 vue.js

项目中需要使用百度地图来计算两个坐标点之间的距离。项目中引入vue-baidu-map后,组件中没有遗漏到BMap对象,经过一番查找。..正确的使用方法如下1.ImportBaiduMapfrom'vue-baidu-map'Vue.use(BaiduMap,{ak:'yourkey'intovue-baidu-mapmain.jsintheproject})2.在该组件您需要先加载地图组件,然后才能使用BMap。您无需显示地图组件即可将其隐藏。

methods:{//检测地图加载并完成onmapReady({bmap,map}){this.bmap=bmap;},getDistance(p1,p2){try{const_this=this;constbmap=this.bmap;const(newBMap.Point(116.404,39.915),{onSearchComplete:function(results){_this.distance=Math.floor((results.taxiFare.distance)/1000)//公里}});driving.search(p1,p2);}catch(e){console.warn(e,'e')}},handleAddressChange(){constBMap=this.BMap;如果(!BMap)返回;constp1=newBMap.Point(Longitude1,Latitude1);constp2=newBMap.Point(Longitude2,Latitude2);this.getDistance(p1,p2)}}