我在sql数据库中具有固定的纬度和经度(纬度,经度)值.现在,我要执行以下操作：当我在搜索框中输入城市名称时,在onClick事件上,它将通过POST将数据发送到PHP文件,并进行一个SQL查询,该查询将返回经纬度数据.现在,我想调用javascript函数,以从PHP文件中加载带有lat,lng参数的地图.我希望所有这些都发生在一个简单的onClick事件上.
这是我应该初始化地图的JavaScript函数(load()函数)：
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;
}
}
<?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;" />
问题是在返回PHP数据之前调用了javascript函数load().我已经花了一个多星期的时间来解决这个问题,但是我找不到解决方案.我试过eval(),也试过从PHP调用load()函数,但它也失败了,因为它在onClick事件中,而wich在div中,所以load()函数不起作用,当我继续检查元素i Firebug时,它仅显示在div内.
我说的是GLatLng()的经度,经度值.
任何帮助表示赞赏.如果有人有更好的主意来解决此问题,请提供帮助.
解决方法:
我实际上用MysqL做过同样的事情.我使用的google map 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 onl oad="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"
<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" /> 1.75" - 2.25"
<img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" />2.50" - 3.00"
<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" />3.25" - 3.75"
</div>
</body>
</html>
地图Info.PHP
create_element(“ markers”);
$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;
？>
