【vue】vue中使用百度地图在页面加载完成或点击marker后获取距离 |
您所在的位置：网站首页 › bq768 › 【vue】vue中使用百度地图在页面加载完成或点击marker后获取距离 |
|
现在有这样两个需求： 1，使用百度地图，在页面加载完成后渲染出两个点之间的距离。 2，在点击marker后渲染出两个点之间的距离 vue中如何使用百度地图可以看这个：vue中使用百度地图 看到第一个需求的时候，首先第一反应想到的就是监听百度地图的加载完成事件，但实际操作之后发现自己想简单了。 获取距离需要调用百度地图的服务API，但是地图加载完成事件只是监听百度地图的加载完成，所以这时候是监听不到异步获取的距离的。 但问题总要解决啊，解决方法如下： this.addrList是后端返回的list; this.distList是保存获取到的所有距离的数组 methods: { // 初始化地图 async initMap() { const BMapGL = await loadBaiDuDrawMap(); this.map = new BMapGL.Map("container"); const point = new BMapGL.Point(108.93996149471239, 34.2815544199147); this.map.centerAndZoom(point, 14); this.map.enableScrollWheelZoom(true); // 获取距离 this.getDistance(BMapGL); }, // 获取距离 getDistance(BMapGL) { // 当前位置 const start = new BMapGL.Point(108.93996149471239, 34.2815544199147); // 调用百度地图api const transit = new BMapGL.DrivingRoute(this.map, { onSearchComplete: (res) => { const plan = res.getPlan(0); const distance = plan.getDistance(true); // 将当前距离push进数组中 this.distList.push(distance); // 给列表中的每一项手动添加一个距离属性 let idx = this.distList.length - 1; // 因为没有通过在data中声明,所以需要使用$set方法,来让distance属性成为响应式 this.$set(this.addrList[idx], "distance", distance); }, }); this.addrList.forEach((ele) => { if (ele.serviceHallGps) { let latlng = ele.serviceHallGps.split(","); // 获取终点，并计算距离 const end = new BMapGL.Point(latlng[1], latlng[0]); transit.search(start, end); } }); }, }第一个需求解决了，那第二个就简单多了，直接监听marker的点击事件就可以了，具体代码如下： methods: { // 初始化地图 async initMap() { const BMapGL = await loadBaiDuDrawMap(); this.map = new BMapGL.Map("container"); const point = new BMapGL.Point(108.93996149471239, 34.2815544199147); this.map.centerAndZoom(point, 14); this.map.enableScrollWheelZoom(true); // 创建marker点 this.createMarker(BMapGL); // 获取距离 this.getDistance(BMapGL); }, // 获取距离 getDistance(BMapGL) { // 当前位置 const start = new BMapGL.Point(108.93996149471239, 34.2815544199147); // 调用百度地图api const transit = new BMapGL.DrivingRoute(this.map, { onSearchComplete: (res) => { const plan = res.getPlan(0); const distance = plan.getDistance(true); // 将当前距离push进数组中 this.distList.push(distance); }, }); this.addrList.forEach((ele) => { if (ele.serviceHallGps) { let latlng = ele.serviceHallGps.split(","); // 获取终点，并计算距离 const end = new BMapGL.Point(latlng[1], latlng[0]); transit.search(start, end); } }); }, // 创建marker点标记 createMarker(BMapGL) { const latlng = this.getLatlng(); if (!latlng) return; latlng.forEach((ele, idx) => { const point = new BMapGL.Point(ele.lat, ele.lng); let marker = new BMapGL.Marker(point); this.map.addOverlay(marker); marker.addEventListener("click", () => { this.mkrCallback(idx); }); }); }, // marker点击回调 mkrCallback(idx) { this.distList.forEach((ele, idx) => { this.addrList[idx].distance = ele; }); }, } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |