Finden der Entfernung zwischen 2 Punkten mit Google Maps API

Ich versuche, den Abstand zwischen 2 Punkten zu finden, von denen einer aus Benutzereingaben und der andere aus meiner Datenbank stammt. Ich habe den Code unten zusammengestellt, der zu funktionieren scheint (Ich habe Testvariablen an Ort und Stelle, so dass keine Datenbankabzüge zum Testen gemacht werden), aber ich habe eine Wand getroffen; Ich kann nicht herausfinden, warum ich zweimal auf die Schaltfläche klicken muss, damit die Ausgabe angezeigt wird.Finden der Entfernung zwischen 2 Punkten mit Google Maps API

Jede Hilfe ist sehr geschätzt

CODE UNTEN:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script> 
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html --> 
    <script type="text/javascript"> 

//var globalAddr = new Array(); 
var globalName; 
var xmlhttp; 
var geocoder, location1, location2; 
var distanceVal; 

    function initialize() { 
     geocoder = new GClientGeocoder(); 
    } 

     function showLocation() { 
     geocoder.getLocations(document.getElementById("address1").value, function (response) { 
      if (!response || response.Status.code != 200) 
      { 
       alert("Sorry, we were unable to geocode the first address"); 
      } 
      else 
      { 
       location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address}; 
       geocoder.getLocations(document.getElementById("address2").value, function (response) { 
        if (!response || response.Status.code != 200) 
        { 
         alert("Sorry, we were unable to geocode the second address"); 
        } 
        else 
        { 
         location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address}; 
         calculateDistance(); 
        } 
       }); 
      } 
     }); 
    } 

    function calculateDistance() 
    { 

      var glatlng1 = new GLatLng(location1.lat, location1.lon); 
      var glatlng2 = new GLatLng(location2.lat, location2.lon); 
      var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1); 
      var kmdistance = (miledistance * 1.609344).toFixed(1); 

      distanceVal = miledistance; 
    } 

function loadXMLDoc(url,cfunc) 
{ 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
      } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=cfunc; 
     xmlhttp.open("GET",url,true); 
     xmlhttp.send(); 
} 
function getData(str) 
     { 
     loadXMLDoc("getData.php?address="+str,function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
        var x = xmlhttp.responseText; 
        var dnames = x.split("~~~"); 
        var daddr = x.split("^^^"); 
        daddr.shift(); 
        dnames.pop(); 

        var testArray = new Array('85281','18657','90210'); 

        var shortest = 999999; 

        for(var i = 0; i <= testArray.length-1; i++) 
        { 

         document.getElementById("address2").value = testArray[i];//daddr[i]; 
         showLocation(); 

         //i get a blank alert 3 times here the first time, then I get the a value the 2nd time.. makes no sense! 
         alert(distanceVal); 

         if (shortest > distanceVal) 
         { 
          shortest = distanceVal; 
          globalName = dnames[i]; 
         } 

        } 

        document.getElementById("results").innerHTML = globalName + " " + shortest; 

       } 
      }) 
     } 

    </script> 
    </head> 

    <body onload="initialize()"> 

    <form> 
     <p> 
     <input type="text" id="address1" name="address1" class="address_input" size="40" /> 
     <input type="hidden" id="address2" name="address2" /> 
     <input type="hidden" id="distance" name="distance" /> 
     <input type="button" name="find" value="Search" onclick="getData(document.getElementsByName('address1')[0].value)"/> 
     </p> 
    </form> 
    <p id="results"></p> 

    </body> 
</html>

Quelle

2012-04-02 bruchowski

Wenn Sie showLocation() in Ihrem getData() Rückruf nennen, das aufbricht zwei Geocoder Anrufe und wenn beide erfolgreiche Anrufe calculateDistance().

Beide Geocoder-Aufrufe benötigen jedoch Zeit. Die erste getLocations() löst eine Geokodierungsanfrage aus und lässt sie weiterlaufen, um in ihrem Callback behandelt zu werden. Innerhalb dieser Funktion gibt es eine weitere Anfrage, die in einem eigenen Callback behandelt wird.

Während diese auf Ergebnisse warten, wurde die Codeausführung fortgesetzt und erreicht, obwohl calculateDistance() noch nicht aufgerufen wurde. Folglich ist distanceVal noch nicht festgelegt.

Wenn Sie die Taste erneut klicken, wird die globale distanceVal durch alle Callback-Funktionen bestückt worden sind, so (auch wenn der zweite Satz von Geokoordinaten/Rückrufe haben nicht abgeschlossen), wird der Wert angezeigt haben. Wenn Sie jedoch die Werte ändern, die Sie testen, wird der alte Wert angezeigt, der jetzt falsch ist.

Alles, die in einer Callback-Funktion gefunden auf Werte hängt muss innerhalb dieser Callback-Funktion verarbeitet werden. Wenn Sie die Anzeige der Daten in calculateDistance() verschieben, wird alles in Ordnung sein, weil die Daten für diese Funktion verfügbar sind.

Quelle

2012-04-03 00:04:12

Dank Andrew, ich zog mir die Haare aus, um es zum Laufen zu bringen, das macht total Sinn. – bruchowski

Finden der Entfernung zwischen 2 Punkten mit Google Maps API

Antwort

Verwandte Themen