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

最新推荐文章于 2025-02-26 22:00:16 发布

王永存

最新推荐文章于 2025-02-26 22:00:16 发布

阅读量7.7k

点赞数 1

分类专栏：其他 vue 文章标签：百度地图 api

本文链接：https://blog.csdn.net/wang1006008051/article/details/78043607

版权

vue 同时被 2 个专栏收录

65 篇文章

订阅专栏

其他

51 篇文章

订阅专栏

本文介绍如何使用百度地图API结合Vue.js实现店铺与当前位置之间的距离测量。具体包括通过浏览器获取用户地理位置坐标，利用BMap API计算两点间距离，并在前端页面上展示各店铺到用户的直线距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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