1

私は Javascript にあまり精通していませんが、それを使用して簡単な Web アプリを構築し、もう少し学習しようとしています。

Google Distance Matrix API を使用して、2 つの住所間の距離を照会できるようにしたいと考えています。

Google のオートコンプリート機能を使用して住所を取得する 2 つの入力フィールドがあり、住所の を使用place_idして API にクエリを実行します。

API を呼び出してデータを取得するには、JSONP を使用する必要があると思いますが、応答の使用に問題があり、コンソールに次のエラーが表示されます。

キャッチされない SyntaxError: 予期しないトークン:

私は周りを検索してきましたが、誰もが 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"
}
4

2 に答える 2

8

さらに掘り下げた後、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-03T04:55:42.087 に答える