2010-11-24 4 views
3

Ich habe Lattitude und Längengrad (lat, lng) Werte in meiner SQL-Datenbank festgelegt. Nun möchte ich Folgendes tun: Wenn ich den Namen der Stadt in die Suchbox einfüge, sendet sie bei einem onClick-Ereignis die Daten per POST an die php-Datei und erstellt eine SQL-Abfrage, die die lat, lng-Daten zurückgibt. Jetzt möchte ich die JavaScript-Funktion zum Laden der Karte mit den Lat, lng-Parametern aus der PHP-Datei aufrufen. Ich möchte, dass all dies in einem einfachen onClick-Event passiert.google maps mysql lat lng Javascript

Hier ist meine Javascript-Funktion, wich die Karte initialisieren soll (die Last() Funktion):

function getFile() { 
    if (window.XMLHttpRequest) {    
    AJAX=new XMLHttpRequest();    
    } else {         
    AJAX=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (AJAX) { 
    var searchField = document.getElementById("searchField"); 

    AJAX.open("POST", "gmap.php", false);        
    AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    AJAX.setRequestHeader("Content-length", searchField.value.length); 
    AJAX.setRequestHeader("Connection", "close"); 
     AJAX.send("foo=" + searchField.value); 
    return load(AJAX.responseText); 

    } else { 
    return false; 
    }            
} 

Und hier ist meine gmap.php Datei:

<?php 
header('Content-Type: text/html; charset=UTF-8'); 
mb_internal_encoding('UTF-8'); 
$a = $_POST['searchField']; 
$dbhost = "localhost"; 
$dbuser = "*******"; 
$dbpass = "*******"; 
$dbname = "citydb"; 



    //connect sql 
mysql_connect($dbhost, $dbuser, $dbpass); 

    //select db 
mysql_select_db($dbname) or die(mysql_error()); 
    //retrieve data 
//$city=$_GET['city']; 
    //escape user input to help prevent SQL injection 
//$city=mysql_real_escape_string($city); 
    //query 
mysql_query('SET CHARACTER SET utf8'); 
$result=mysql_query("SELECT citystart, cityend FROM cityids WHERE city='$a' "); 
if(!result) { 

    die("Database query failed: " . myql_error()); 
    } 

while($row=mysql_fetch_array($result)) { 


    $lat=$row['citystart']; 
    $lng=$row['cityend']; 

Hier ist die onClick call:

<input type="submit" class="regular" name="FindEv" value="FindEv" onClick="getFile(); return false;" /> 

Das Problem ist, dass die Javascript-Funktion load() aufgerufen wird, bevor die PHP-Daten re hat gedreht. Ich habe jetzt über eine Woche damit verbracht, das herauszufinden, aber ich kann keine Lösung finden. Ich habe versucht, eval(), ich habe auch versucht, die load() -Funktion aus PHP, die auch fehlgeschlagen, weil es in einem onClick-Ereignis, das ist innerhalb eines div, so dass die load() -Funktion nicht exetuce Es wird nur innerhalb der div angezeigt, wenn ich weiter gehe Inspect Element i Firebug.

Ich spreche über lat, lng Werte für GLatLng().

Jede Hilfe wird geschätzt. Wenn jemand eine bessere Idee hat, dies zu lösen, bitte helfen Sie.

Antwort

2

Ich hatte tatsächlich die gleiche Sache mit MySQL. Die Google Map API, die ich verwendet habe, war ein wenig anders.

<!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"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Map API Test</title> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh6DEO6zsM8Xua6WBNm-dbBRD8yUxCv4Esyhw4vpb86bE3mijaBS3Fcz1Rq_adaGcRea0Mlr9lNqAJw" 
      type="text/javascript"></script> 

    <script type="text/javascript"> 
    //<![CDATA[ 

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconBlue.iconSize = new GSize(12, 20); 
    iconBlue.shadowSize = new GSize(22, 20); 
    iconBlue.iconAnchor = new GPoint(6, 20); 
    iconBlue.infoWindowAnchor = new GPoint(5, 1); 

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconRed.iconSize = new GSize(12, 20); 
    iconRed.shadowSize = new GSize(22, 20); 
    iconRed.iconAnchor = new GPoint(6, 20); 
    iconRed.infoWindowAnchor = new GPoint(5, 1); 

    var iconYellow = new GIcon(); 
    iconYellow.image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'; 
    iconYellow.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconYellow.iconSize = new GSize(12, 20); 
    iconYellow.shadowSize = new GSize(22, 20); 
    iconYellow.iconAnchor = new GPoint(6, 20); 
    iconYellow.infoWindowAnchor = new GPoint(5, 1); 

    var iconGreen = new GIcon(); 
    iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png'; 
    iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconGreen.iconSize = new GSize(12, 20); 
    iconGreen.shadowSize = new GSize(22, 20); 
    iconGreen.iconAnchor = new GPoint(6, 20); 
    iconGreen.infoWindowAnchor = new GPoint(5, 1); 

    var customIcons = []; 
    customIcons["175"] = iconGreen; 
    customIcons["200"] = iconGreen; 
    customIcons["225"] = iconGreen; 
    customIcons["250"] = iconBlue; 
    customIcons["275"] = iconBlue; 
    customIcons["300"] = iconBlue; 
    customIcons["325"] = iconRed; 
    customIcons["350"] = iconRed; 
    customIcons["375"] = iconRed; 
    customIcons["100"] = iconYellow; 
    customIcons["125"] = iconYellow; 
    customIcons["150"] = iconYellow; 

    function load() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map")); 
     map.addControl(new GSmallMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.setCenter(new GLatLng(39.8163, -98.55762), 4); 

     GDownloadUrl("markerData.php", function(data) { 
      var xml = GXml.parse(data); 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var mapTime = markers[i].getAttribute("time"); 
      var mapSize = markers[i].getAttribute("size"); 
      var mapCity = markers[i].getAttribute("city"); 
      var mapState = markers[i].getAttribute("state"); 
      var mapPop = markers[i].getAttribute("pop"); 
      var type = markers[i].getAttribute("size"); 
      var mapComments = markers[i].getAttribute("comments"); 
      var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
            parseFloat(markers[i].getAttribute("lng"))); 
      var marker = createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type); 
      map.addOverlay(marker); 
      } 
     }); 
     } 
    } 

    function createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type) { 
     var marker = new GMarker(point, customIcons[type]); 
     var html = "Time: " + mapTime + "<br/>" + "Size: " + mapSize + "<br/>" + "Location: " + mapCity + ", " + mapState + "<br/>" + "Population: " + mapPop + "<br/>" + "Comments: " + mapComments; 
     GEvent.addListener(marker, 'click', function() { 
     marker.openInfoWindowHtml(html); 
     }); 
     return marker; 
    } 
    //]]> 
    </script> 

    </head> 

    <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 750px; height: 500px"></div> 
    <div style="width: 750px; text-align: center"><img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" /> Less than 1.75"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <img src="http://labs.google.com/ridefinder/images/mm_20_green.png" /> 1.75" - 2.25"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" />2.50" - 3.00"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" />3.25" - 3.75" 
    </div> 
    </body> 
</html> 

Karte info.php create_element ("Marker"); $ parnode = $ doc-> append_child ($ node);

// Opens a connection to a MySQL server 
$connection=mysql_connect ($host, $username, $password); 
if (!$connection) { 
    die('Not connected : ' . mysql_error()); 
} 

// Set the active MySQL database 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
    die ('Can\'t use db : ' . mysql_error()); 
}// Select all the rows in the markers table 
$query = "SELECT * FROM mapData WHERE 1"; 
$result = mysql_query($query); 
if (!$result) { 
    die('Invalid query: ' . mysql_error()); 
} 

header("Content-type: text/xml"); 
// Iterate through the rows, adding XML nodes for each 
while ($row = @mysql_fetch_assoc($result)){ 
// ADD TO XML DOCUMENT NODE 
    $node = $doc->create_element("marker"); 
    $newnode = $parnode->append_child($node); 
    $newnode->set_attribute("time", $row['Time']); 
    $newnode->set_attribute("size", $row['Size']); 
    $newnode->set_attribute("city", $row['City']); 
    $newnode->set_attribute("state", $row['State']); 
    $newnode->set_attribute("pop", $row['Population']); 
    $newnode->set_attribute("comments", $row['Comments']); 
    $newnode->set_attribute("lat", $row['Latitude']); 
    $newnode->set_attribute("lng", $row['Longitude']); 
} 
$xmlfile = $doc->dump_mem(); echo $xmlfile; 

?>

+1

Ja, aber Sie haben GLatLng fixiert (39,8163, -98,55762), ich möchte diese Werte (39,8163, -98,55762) zu gelesen werden von SQL ... – digitale

+1

Ich sehe was du meinst. lass mich sehen, ob ich es zu diesen Punkten mit meinem lat lon lesen lassen kann – shinjuo

2

AJAX (Stichwort asynchrone) blockiert nicht den Rest des Skripts von der Ausführung, wie Sie es erwarten.

Sie haben eine abgeschlossene Anforderung zur Überprüfung der onreadystatechange Methode ...

AJAX.onreadystatechange = function() { 
    if (AJAX.readyState == 4 && AJAX.status == 200) { 
     load(AJAX.responseText); 
    } 
}
+1

Ich habe dies früher versucht, die gleiche Sache, die load() - Funktion ausgeführt wird, bevor die PHP-Werte übergeben werden ... – digitale

+1

Haben Sie die "zurück load (...) "Zeile? Wenn ja, wird load() irgendwo anders aufgerufen? In dem Code, den ich zur Verfügung gestellt habe, wird es nur ausgelöst ** nachdem ** PHP Werte zurückgegeben hat. Daher stimmt etwas anderes nicht. – simshaun

+1

Es wird nirgendwo sonst aufgerufen. Ich habe wirklich alles versucht. Ich weiß, aber es scheint, dass es nicht so ist. Die PHP-Datei ist in Ordnung, ich habe es mehrmals getestet ... – digitale

Verwandte Themen