Google Maps API distanceMatrixRequestのレスポンスを使用

-1

distanceMatrixRequestの応答を関数内で取得し、別の関数で使用したいと思いますが、できません。私は、配列内のオブジェクトに応答を入れ、その配列を他の関数への引数として送信しています。私はFirefoxの開発版で非常に奇妙なエラーが出ます：Google Maps API distanceMatrixRequestのレスポンスを使用

console.log(distanceResponse); // Outputs an array of one element, which is the object 
    console.log(distanceResponse[0]); // Outputs undefined 
    console.log(distanceResponse[0].distance); // Outputs an error

distanceResponseは未定義ではない一つの要素、なぜdistanceResponse [0]が定義されていない配列ですか？ここは完全なコードです：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    <script> 
     function initMap() { 
     var uluru = {lat: 39.936489, lng: -98.128644}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     } 

     function getDistances() { 
     var waypts = [{location: 'Washington dc', stopover: true}, {location: 'virginia', stopover: true}]; 
     var bounds = new google.maps.LatLngBounds; 
     //Services 
     var distanceService = new google.maps.DistanceMatrixService; 
     var distanceResponse = []; 
     for (var counter = 1; counter < waypts.length; counter++) { 
      distanceService.getDistanceMatrix({ 
       origins: [waypts[counter-1].location], 
       destinations: [waypts[counter].location], 
       travelMode: 'DRIVING', 
       unitSystem: google.maps.UnitSystem.IMPERIAL, 
       avoidHighways: false, 
       avoidTolls: false 
      }, 
      function(response, status) { 
       if (status !== 'OK') { 
       alert('Error was: ' + status); 
       } else { 
       var results = response.rows[0].elements; 
       distanceResponse.push({duration: results[0].duration.value, distance: results[0].distance.value}); 
       } 
      } 
     ); 
     } 
     test(distanceResponse); 
     } 

     function test(distanceResponse) { 
     console.log(distanceResponse); // Outputs an array of one element, which is the object 
     console.log(distanceResponse[0]); // Outputs undefined 
     console.log(distanceResponse[0].distance); // Outputs an error 
     } 

    </script> 
    <div id="map" style="width: 622px; height: 274px; position:relative;overflow:auto; "></div> 
    <button onclick="getDistances()">Get distances</button> 
    <script defer src="https://maps.googleapis.com/maps/api/js?key=[MY-API-KEY]&callback=initMap"> 
    </script> 
    </body> 
</html>

はあなたのコードで

出典

2017-12-28 Haniver

'console.log（distanceResponse）;'の結果を確認して、** one **要素を持つ配列が得られることを確認できますか？あなたのコードから、あなたは空の配列を取得しているようです。確認するには、 'console.log（distanceResponse.length）;' – Vivek

ありがとうdistanceResponse配列がそれに任意の値を取得する前に、文のtest(distanceResponse);が実行されます。これは、配列distanceResponse.pushに値をプッシュする文がコールバック関数内にあるためです。この問題を解決するには、関数呼び出しステートメントtest(distanceResponse);をコールバック関数内に移動する必要があります。

以下のコードが有効です。

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    <script> 
     function initMap() { 
     var uluru = {lat: 39.936489, lng: -98.128644}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     } 

     function getDistances() { 
     var waypts = [{location: 'Washington dc', stopover: true}, {location: 'virginia', stopover: true}]; 
     var bounds = new google.maps.LatLngBounds; 
     //Services 
     var distanceService = new google.maps.DistanceMatrixService; 
     var distanceResponse = []; 
     for (var counter = 1; counter < waypts.length; counter++) { 
      distanceService.getDistanceMatrix({ 
       origins: [waypts[counter-1].location], 
       destinations: [waypts[counter].location], 
       travelMode: 'DRIVING', 
       unitSystem: google.maps.UnitSystem.IMPERIAL, 
       avoidHighways: false, 
       avoidTolls: false 
      }, 
      function(response, status) { 
       if (status !== 'OK') { 
       alert('Error was: ' + status); 
       } else { 
       var results = response.rows[0].elements; 
       distanceResponse.push({duration: results[0].duration.value, distance: results[0].distance.value}); 
       test(distanceResponse); 
       } 
      } 
     ); 
     } 
     } 

     function test(distanceResponse) { 
     console.log(distanceResponse); // Outputs an array of one element, which is the object 
     console.log(distanceResponse[0]); // Outputs undefined 
     console.log(distanceResponse[0].distance); // Outputs an error 
     } 

    </script> 
    <div id="map" style="width: 622px; height: 274px; position:relative;overflow:auto; "></div> 
    <button onclick="getDistances()">Get distances</button> 
    <script defer src="https://maps.googleapis.com/maps/api/js?key=[MY-API-KEY]&callback=initMap"> 
    </script> 
    </body> 
</html>

そして、あなたが今得ているエラーメッセージについて。

console.log(distanceResponse);

あなたは最初に空の配列[]とdistanceResponseを初期化してきました。この値はtest関数に渡されます。だからあなたは空の配列を得るでしょう。

console.log(distanceResponse[0]);

配列distanceResponseはそれではない値を持っているので、あなたはundefinedを得ています。あなたは財産undefinedのdistanceにアクセスしようとしているので、あなたがエラーを取得しているconsole.log(distanceResponse.length);

console.log(distanceResponse[0].distance);

を使用して、それを確認することができます。

出典

2017-12-28 03:34:41 Vivek

ありがとう！それはそれを解決した – Haniver

Google Maps API distanceMatrixRequestのレスポンスを使用

答えて

関連する問題