先来看一下,要实现的效果:每个店铺的经纬度已经通过服务器获得,通过浏览器定位可以获得我的经纬度,然后可以通过百度地图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
   }

Logo

前往低代码交流专区

更多推荐