如何使用JavaScript计算Google Maps中两个标记(坐标)之间的距离

本文概述

• A.使用Google几何模块
• B.使用Haversine公式

开发人员使用Google Maps时最经常出现的需求之一就是如何获取地图上2个不同点之间的距离, 通常由Markers或仅由普通坐标定义, 例如以下代码：

var map, markerA, markerB;

// Callback executed when Google Maps script has been loaded
function initMap() {
    // 1. Initialize map
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10, center: {
            lat: 6.066385702972249, lng: -74.07493328924413
        }
    });

    // 2. Put first marker in Bucaramanga
    markerA = new google.maps.Marker({
        position: {
            lat: 7.099473939079819, lng: -73.10677064354888
        }, map: map, icon: {
            url: 'http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png'
        }, title: "Marker A"
    });

    // 3. Put second marker in Bogota
    markerB = new google.maps.Marker({
        position: {
            lat: 4.710993389138328, lng: -74.07209873199463
        }, map: map, icon: {
            url: 'http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png'
        }, title: "Marker B"
    });
}   

这将放置在本文图片上的2个标记。根据Google的了解, 我们可以知道布卡拉曼加至波哥大的飞行距离约为280公里：

因此, 理论上我们将从我们的方法中获得一个近似值, 以获取两个坐标之间的距离。在本文中, 我们将向你展示两种获取两个标记之间的距离或使用Google Maps中的JavaScript进行坐标协调的方法。

A.使用Google几何模块

默认情况下, Google提供了一种自定义方式, 可以使用Geometry库获取地图上2个点之间的距离。你需要通过将＆libraries get参数附加到Google Maps JS API的请求网址中来包含此库：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap&libraries=geometry"></script>

确定已加载该库后, 你现在可以通过google.maps.geometry.spherical.computeDistanceBetween方法从Google Maps获取2个坐标(LatLng对象)之间的距离。例如, 如果要获取两个标记之间的距离, 则可以简单地运行以下指令：

// Obtain the distance in meters by the computeDistanceBetween method
// From the Google Maps extension
var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
    markerA.getPosition(), markerB.getPosition()
);

// Outputs: Distance in Meters:  286562.7470149898
console.log("Distance in Meters: ", distanceInMeters);

// Outputs: Distance in Kilometers:  286.5627470149898
console.log("Distance in Kilometers: ", (distanceInMeters * 0.001));

如你所见, computeDistanceBetween方法将LatLng对象作为第一个和第二个参数。它将根据这两个参数计算距离并返回以米为单位的值。由你决定将数学单位更改为英里或公里。或者, 如果你不使用标记, 则可以提供上述LatLng对象作为具有直接坐标的参数：

// Obtain the distance in meters by the computeDistanceBetween method
// From the Google Maps extension using plain coordinates
var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
    new google.maps.LatLng({
        lat: 7.099473939079819, lng: -73.10677064354888
    }), new google.maps.LatLng({
        lat: 4.710993389138328, lng: -74.07209873199463
    })
);

// Outputs: Distance in Meters:  286562.7470149898
console.log("Distance in Meters: ", distanceInMeters);

// Outputs: Distance in Kilometers:  286.5627470149898
console.log("Distance in Kilometers: ", (distanceInMeters * 0.001));

B.使用Haversine公式

如果你不必依赖Google地图, 而可以基于Haversine公式(导航中使用的重要方程式)计算相同的距离, 则可以根据其经度和纬度提供球体上两个点之间的大圆距离。这是球面三角法中更通用的公式的特例, 该公式具有正弦函数, 关系到球面”三角形”的边和角。

首先, 在代码中包含以下两个功能：

/**
 * Converts degrees to radians.
 * 
 * @param degrees Number of degrees.
 */
function degreesToRadians(degrees){
    return degrees * Math.PI / 180;
}

/**
 * Returns the distance between 2 points of coordinates in Google Maps
 * 
 * @see https://stackoverflow.com/a/1502821/4241030
 * @param lat1 Latitude of the point A
 * @param lng1 Longitude of the point A
 * @param lat2 Latitude of the point B
 * @param lng2 Longitude of the point B
 */
function getDistanceBetweenPoints(lat1, lng1, lat2, lng2){
    // The radius of the planet earth in meters
    let R = 6378137;
    let dLat = degreesToRadians(lat2 - lat1);
    let dLong = degreesToRadians(lng2 - lng1);
    let a = Math.sin(dLat / 2)
            *
            Math.sin(dLat / 2) 
            +
            Math.cos(degreesToRadians(lat1)) 
            * 
            Math.cos(degreesToRadians(lat1)) 
            *
            Math.sin(dLong / 2) 
            * 
            Math.sin(dLong / 2);

    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    let distance = R * c;

    return distance;
}

第一个功能允许你将度数转换为弧度, 这是感兴趣的函数getDistanceBetweenPoints方法所必需的。在这种情况下, 请对RosettaCode的原始代码片段进行一些修改。该函数接收分别对应于两个点的纬度和经度值的四个参数。此解决方案不依赖于Google Maps, 因此也可以在其他项目中使用：

// Obtain the distance in meters using the haversine formula
var distanceInMeters = getDistanceBetweenPoints(
    // LatA
    7.099473939079819, // LongA
    -73.10677064354888, // LatB
    4.710993389138328, // LongB
    -74.07209873199463
);

// Outputs: Distance in Meters:  286476.96153465303
console.log("Distance in Meters: ", distanceInMeters);

// Outputs: Distance in Kilometers:  286.476961534653
console.log("Distance in Kilometers: ", (distanceInMeters * 0.001));

编码愉快！