使用Javascript查詢Google距離矩陣API

我不是很流利的Javascript，但我正在嘗試構建一個簡單的Web應用程序來嘗試和學習更多。使用Javascript查詢Google距離矩陣API

我想使用Google Distance Matrix API讓我查詢兩個地址之間的距離。

我有兩個輸入字段，它們使用Google的自動完成功能獲取地址，然後使用地址的place_id對API進行查詢。

我相信我需要使用JSONP使調用API，並獲取數據，但我使用了應答有麻煩，我碰到下面的錯誤在我的控制檯：

Uncaught SyntaxError: Unexpected token :

我我一直在四處搜索，每個人都在使用PHP與JSONP結合使用 - 但是我想避免這種情況，並保留整個流程客戶端。

如何發出請求然後使用返回的JSON響應？

這裏是我使用，使目前要求的功能：

function getDistance() 
    { 
     //Find the distance 
     $.getJSON("https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:" + $("#autocompleteDeparture").data("place_id") + "&destinations=place_id:" + $("#autocompleteArrival").data("place_id") + "&key=MY_API_KEY0&callback=?", function(data) { 
      data = JSON.parse(data); 
      console.log(data); 
     }); 
    }

如果我檢查，它成功運行並返回正確的JSON數據的請求：

{ 
    "destination_addresses" : [ "9 Coach Ln, Belmont, Lower Hutt 5010, New Zealand" ], 
    "origin_addresses" : [ "3/30 Rata St, Naenae, Lower Hutt 5011, New Zealand" ], 
    "rows" : [ 
     { 
     "elements" : [ 
      { 
       "distance" : { 
        "text" : "4.9 km", 
        "value" : 4934 
       }, 
       "duration" : { 
        "text" : "8 mins", 
        "value" : 509 
       }, 
       "status" : "OK" 
      } 
     ] 
     } 
    ], 
    "status" : "OK" 
}

來源

2016-07-02 James

您在處理函數中獲得的'data'對象就是 - 一個對象。因此，您應該可以使用以下值： 'data.rows [0] .elements [0] .distance.text' 來做任何你想做的事情 – daf

或者使用.value如果你打算用它來計算 - - 看起來像是以米爲單位給你的距離。 – daf

後一些更多的挖我發現，API不支持JSONP和我可以直接通過JavaScript中使用距離矩陣服務，像這樣：

function getDistance() 
    { 
    //Find the distance 
    var distanceService = new google.maps.DistanceMatrixService(); 
    distanceService.getDistanceMatrix({ 
     origins: [$("#autocompleteDeparture").val()], 
     destinations: [$("#autocompleteArrival").val()], 
     travelMode: google.maps.TravelMode.WALKING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
     durationInTraffic: true, 
     avoidHighways: false, 
     avoidTolls: false 
    }, 
    function (response, status) { 
     if (status !== google.maps.DistanceMatrixStatus.OK) { 
      console.log('Error:', status); 
     } else { 
      console.log(response); 
      $("#distance").text(response.rows[0].elements[0].distance.text).show(); 
      $("#duration").text(response.rows[0].elements[0].duration.text).show(); 
     } 
    }); 
    }

來源

2016-07-03 04:55:42 James

從https://console.developers.google.com/獲取您的api密鑰
獲取希望找到距離的地方的經度和緯度。將它們轉換成LatLng對象。
使用computeDistanceBetween函數。

......

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

<script type="text/javascript"> 
    function initMap(){ 
     srcLocation = new google.maps.LatLng(19.075984, 72.877656); 
     dstLocation = new google.maps.LatLng(12.971599, 77.594563); 
     var distance = google.maps.geometry.spherical.computeDistanceBetween(srcLocation, dstLocation) 
     console.log(distance/1000); // Distance in Kms. 
    } 
</script>

來源

2016-07-02 12:11:05

我已經有一個API密鑰，我已經成功檢索信息。我的問題是關於我得到的錯誤以及我如何解決它。 – James

使用Javascript查詢Google距離矩陣API

回答

相關問題