当前位置：首页 > VUE

vue实现地图距离

2026-02-22 01:26:11VUE

Vue 实现地图距离计算

在 Vue 中实现地图距离计算，通常需要结合地图 API（如高德、百度或 Google Maps）和数学公式（如 Haversine 公式）。以下是两种常见实现方式：

使用高德/百度地图 API

注册开发者账号并获取 API Key，在 Vue 项目中引入地图 SDK：

// 安装依赖（以高德为例）
npm install @amap/amap-jsapi-loader

// Vue 组件中加载
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  mounted() {
    AMapLoader.load({
      key: 'YOUR_API_KEY',
      version: '2.0'
    }).then((AMap) => {
      const map = new AMap.Map('map-container');
      // 计算两点距离
      const distance = AMap.GeometryUtil.distance(
        new AMap.LngLat(116.39, 39.9),  // 点1
        new AMap.LngLat(116.42, 39.92)  // 点2
      );
      console.log(distance + '米');
    });
  }
}

使用 Haversine 公式计算

若无需地图渲染，仅需计算经纬度距离，可使用 Haversine 公式：

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));
  return R * c; // 返回千米
}

// Vue 中调用
this.distance = calculateDistance(39.9, 116.4, 39.92, 116.42);

可视化距离展示

结合地图标记和线段绘制（以高德为例）：

AMapLoader.load({ key: 'YOUR_KEY' }).then((AMap) => {
  const map = new AMap.Map('map-container');
  const marker1 = new AMap.Marker({ position: [116.39, 39.9] });
  const marker2 = new AMap.Marker({ position: [116.42, 39.92] });

  const polyline = new AMap.Polyline({
    path: [[116.39, 39.9], [116.42, 39.92]],
    strokeColor: 'red'
  });

  map.add([marker1, marker2, polyline]);
});