如何使用谷歌地图api V3计算两个城市之间的距离

时间:2021-04-11 15:26:13

How to calculate the driving distance ?

如何计算行驶距离?

I'm unable to find a working example, can anybody help me ?

我找不到一个有效的例子,有人可以帮助我吗?

Thank you.

谢谢。

EDIT: More info:

编辑:更多信息:

I have two text inputs to type the cities. On change I just want to display/update the distance in another div.

我有两个文本输入来键入城市。在改变时我只想在另一个div中显示/更新距离。

1 个解决方案

#1


17  

What you want is the Distance Matrix API. That is, if you are really using it in combination google maps. Note that Google prohibits the use of this API if you are not using it with a Google Map somewhere on the page.

你想要的是Distance Matrix API。也就是说,如果你真的在组合谷歌地图中使用它。请注意,如果您未在网页上某处使用Google地图,则Google禁止使用此API。

Here's a basic example of the Distance Matrix API:

以下是Distance Matrix API的基本示例:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var origin = new google.maps.LatLng(55.930385, -3.118425),
    destination = "Stockholm, Sweden",
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.destinationAddresses[0];
        dest.value = response.originAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}
</script>
</head>
<body>
    <br>
    Basic example for using the Distance Matrix.<br><br>
    Origin: <input id="orig" type="text" style="width:35em"><br><br>
    Destination: <input id="dest" type="text" style="width:35em"><br><br>
    Distance: <input id="dist" type="text" style="width:35em">
</body>
</html>

This is a version of google's example adapted to your personal taste which I found in the Google Maps Api v3 - Distance Matrix section

这是谷歌的一个版本的例子,适合您的个人品味,我在谷歌地图Api v3 - 距离矩阵部分找到

#1


17  

What you want is the Distance Matrix API. That is, if you are really using it in combination google maps. Note that Google prohibits the use of this API if you are not using it with a Google Map somewhere on the page.

你想要的是Distance Matrix API。也就是说,如果你真的在组合谷歌地图中使用它。请注意,如果您未在网页上某处使用Google地图,则Google禁止使用此API。

Here's a basic example of the Distance Matrix API:

以下是Distance Matrix API的基本示例:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var origin = new google.maps.LatLng(55.930385, -3.118425),
    destination = "Stockholm, Sweden",
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.destinationAddresses[0];
        dest.value = response.originAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}
</script>
</head>
<body>
    <br>
    Basic example for using the Distance Matrix.<br><br>
    Origin: <input id="orig" type="text" style="width:35em"><br><br>
    Destination: <input id="dest" type="text" style="width:35em"><br><br>
    Distance: <input id="dist" type="text" style="width:35em">
</body>
</html>

This is a version of google's example adapted to your personal taste which I found in the Google Maps Api v3 - Distance Matrix section

这是谷歌的一个版本的例子,适合您的个人品味,我在谷歌地图Api v3 - 距离矩阵部分找到