当前位置：首页 > VUE

vue实现地图距离

2026-01-21 09:59:37VUE

Vue 中实现地图距离计算的方法

在 Vue 中实现地图距离计算通常需要集成第三方地图 API（如百度地图、高德地图或 Google Maps）。以下是几种常见的方法：

使用高德地图 API

高德地图提供了 JavaScript API，可以方便地计算两点之间的距离。

安装高德地图 JavaScript API：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

在 Vue 组件中实现距离计算：

export default {
  methods: {
    calculateDistance() {
      const point1 = new AMap.LngLat(116.397428, 39.90923);
      const point2 = new AMap.LngLat(116.397428, 39.91923);
      const distance = point1.distance(point2); // 返回两点距离，单位：米
      console.log('距离:', distance, '米');
    }
  },
  mounted() {
    this.calculateDistance();
  }
}

使用百度地图 API

百度地图也提供了类似的功能。

vue实现地图距离

引入百度地图 API：

<script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK"></script>

在 Vue 中计算距离：

export default {
  methods: {
    calculateDistance() {
      const point1 = new BMap.Point(116.404, 39.915);
      const point2 = new BMap.Point(116.404, 39.925);
      const distance = map.getDistance(point1, point2); // 返回两点距离，单位：米
      console.log('距离:', distance, '米');
    }
  },
  mounted() {
    this.calculateDistance();
  }
}

使用纯数学计算（Haversine 公式）

如果不依赖地图 API，可以使用 Haversine 公式计算两点间的大圆距离：

vue实现地图距离

function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // 地球半径，单位：千米
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  const distance = R * c; // 距离，单位：千米
  return distance * 1000; // 转换为米
}

在 Vue 组件中使用：

export default {
  data() {
    return {
      distance: 0
    }
  },
  mounted() {
    this.distance = calculateDistance(39.90923, 116.397428, 39.91923, 116.397428);
    console.log('距离:', this.distance, '米');
  }
}

使用第三方库（如 turf.js）

turf.js 是一个地理空间分析库，可以在浏览器中使用：

安装 turf.js：

npm install @turf/turf

在 Vue 中使用：

import * as turf from '@turf/turf';

export default {
  methods: {
    calculateDistance() {
      const point1 = turf.point([116.397428, 39.90923]);
      const point2 = turf.point([116.397428, 39.91923]);
      const distance = turf.distance(point1, point2, {units: 'meters'});
      console.log('距离:', distance, '米');
    }
  },
  mounted() {
    this.calculateDistance();
  }
}