Antwort von Google Maps API verwenden distanceMatrixRequest

-1

Ich möchte die Antwort von einem distanceMatrixRequest in einer Funktion abrufen und in einer anderen Funktion verwenden, aber ich kann nicht. Ich setze die Antwort in ein Objekt in einem Array und sende dieses Array als Argument an die andere Funktion. Ich erhalte eine sehr seltsame Fehler in Firefox Developer Edition:Antwort von Google Maps API verwenden 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

Wenn distanceResponse ein Array mit einem Element, das nicht unbestimmt ist, warum ist distanceResponse [0] nicht definiert? Hier ist der vollständige Code:

<!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>

Danke

Quelle

2017-12-28 Haniver

Können Sie das Ergebnis von 'console.log (distanceResponse);' diesen Code bestätigen und sicherstellen, dass Sie ein Array mit ** einem ** Element erhalten. Aus Ihrem Code scheint es, dass Sie ein leeres Array bekommen werden. Zur Bestätigung versuchen Sie 'console.log (distanceResponse.length);' – Vivek

in Ihrem Code die Anweisung test(distanceResponse); wird ausgeführt, bevor distanceResponse Array in ihm einen beliebigen Wert bekommt. Dies liegt daran, dass die Anweisung, die den Wert an das Array distanceResponse.push überträgt, innerhalb der Callback-Funktion liegt. Um das Problem zu lösen, müssen Sie die Funktion Aufrufanweisung test(distanceResponse); innerhalb der Callback-Funktion verschieben.

Der folgende Code sollte funktionieren.

<!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>

Und in Bezug auf die Fehlermeldungen, die Sie jetzt bekommen werden.

console.log(distanceResponse);

Sie haben distanceResponse mit einem leeren Array [] am Anfang initialisiert. Dieser Wert wird an die test-Funktion übergeben. Sie erhalten also ein leeres Array.

console.log(distanceResponse[0]);

Sie erhalten undefined, da das Array distanceResponse darin keine Werte hat. Sie können es bestätigen console.log(distanceResponse.length);

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

Sie erhalten einen Fehler verwenden, weil Sie eine Eigenschaft distance von undefined zuzugreifen versuchen.

Quelle

2017-12-28 03:34:41 Vivek

Vielen Dank! Das hat es gelöst – Haniver

Antwort von Google Maps API verwenden distanceMatrixRequest

Antwort

Verwandte Themen