vue中利用百度地图API显示两点间的距离

先来看一下，要实现的效果：每个店铺的经纬度已经通过服务器获得，通过浏览器定位可以获得我的经纬度，然后可以通过百度地图API提供方法测量距离。

在vue data 中已经定义了一个数组list，list中存放的店铺信息的对象，包含经纬度信息。html结构代码如下,通过v-for来遍历显示list中的信息。getDistance()是vue methods定义的方法，把item这个对象参数传过去，getDistance（）return 返回两个点的距离。

<li v-for="item in list">
  <span>{{getDistance(item)}}km</span>
</li>

通过浏览器获取我的经纬度，代码如下。这个方法在created或者mounted中调用都行，经纬度数据存为pointA

// 通过浏览器定位获得我的经纬度
getMyPoint () {
  var self = this
  var geolocation = new BMap.Geolocation()
  geolocation.getCurrentPosition(function (res) {
    self.pointA = new BMap.Point(res.point.lng, res.point.lat)  // 通过浏览器获得我的经纬度
  })
},

getDistance()函数代码如下：

// 测量百度地图两个点间的距离
   getDistance (itemPoint) {
     var map = new BMap.Map('')
     var pointB = new BMap.Point(parseFloat(itemPoint.log), parseFloat(itemPoint.lat))  // 店铺的经纬度
     var distance = (map.getDistance(this.pointA, pointB) / 1000).toFixed(2) // 保留小数点后两位
     return distance
   }

vue中利用百度地图API显示两点间的距离

相关推荐