google maps mysql lat lng to javascript

私のSQLデータベースにはlatitudeとlongitude（lat、lng）の値が固定されています。今、私は次のことをしたい：検索ボックスにonClickイベントの都市名を入力すると、POSTを介してPHPファイルにデータが送信され、lat、lngデータを返すSQLクエリが作成されます。今、PHPファイルのlat、lngパラメータを使ってマップをロードするためのjavascript関数を呼び出したいと思います。私はこれがすべて単純なonClickイベントで発生するようにしたい。ここでgoogle maps mysql lat lng to javascript

は私のjavascriptの機能ウィッヒは、マップ（負荷（）関数）を初期化することになっている。

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; 
    }            
}

そして、ここでは私のgmap.phpファイルです：

<?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'];

ここにありますonClick呼び出し：

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

JavaScriptの関数load（）は、PHPデータが再読み込みされる前に呼び出されるという問題があります。回った。私は今これを理解するために1週間以上を費やしましたが、私は解決策を見つけることができません。私はeval（）を試してみました。また、PHPからload（）関数を呼び出そうとしました。これはonClickイベントの内側にあるため失敗しました。これはdiv内にあるため、load（）関数はexetuceそれは、私がFirebugのInspect要素に行くときだけ、div内に表示されます。

私はGLatLng（）のlat、lng値について説明しています。

何か助けていただければ幸いです。誰かがこれを解決するための良いアイデアを持っているなら、助けてください。

出典

2010-11-24 digitale

私は実際にmysqlを使って同じことをしました。私が使用したGoogleマップAPIはちょっと違っていました。

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

地図Info.php create_element（ "マーカー"）。 $ 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;

？>

出典

2010-11-24 20:37:51 shinjuo

はい、しかし、あなたはGLatLng（39.8163、-98.55762）を固定している、私はこの値をしたい（39.8163、-98.55762）へSQLから読み取られる... – digitale

私はあなたが意味するものを参照してください。私が緯度経度でこれらの点に移動できるかどうかを見てみましょう – shinjuo

AJAX（キーワード非同期）あなたはそれを期待していると実行、スクリプトの残りの部分をブロックしません。

あなたはonreadystatechangeにメソッドを使用して完了した要求のためにチェックする必要があり...

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

出典

2010-11-24 20:38:45 simshaun

PHPの値が渡される前にload（）関数が実行されています... – digitale

"returnロード（...）」行？もしそうなら、他の場所で呼び出されているload（）ですか？私が提供したコードでは、** PHPが値を返した後にのみ起動します**。したがって、他の何かが間違っています。 – simshaun

他の場所では呼び出されません。私は本当にすべてを試しました。私は知っているが、それはそうではないようだ。 PHPファイルは大丈夫です、私はそれを数回テストしました... – digitale

google maps mysql lat lng to javascript

答えて

関連する問題