web-dev-qa-db-ja.com

グーグルマップAPIV3を使用して2つの都市間の距離を計算する方法

走行距離の計算方法は？

実用的な例が見つかりません。誰か助けてもらえますか？

ありがとうございました。

編集：詳細：

都市を入力するための2つのテキスト入力があります。変更時に、別のdivで距離を表示/更新したいだけです。

javascriptgoogle-mapsdistance
11
josh2245

必要なのはDistanceMatrixAPIです。つまり、実際にグーグルマップと組み合わせて使用​​している場合です。ページのどこかでGoogleマップで使用していない場合、GoogleはこのAPIの使用を禁止していることに注意してください。

距離行列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>

これは私が見つけたあなたの個人的な好みに適合したグーグルの例のバージョンです グーグルマップApi v3-距離行列セクション

16
DonVaughn