PHP连接mysql数据库，调用Google Map显示不同地方地图信息，使用Javascript弹出悬浮信息窗口展示。
#cat db_map4.php <?php
$username = "tom";
$dbName = "test";
$tableName = "IDC";
$psword = "tom";
$hostname = "127.0.0.1";
$logon_flag = 0;
$server_link = mysql_connect("localhost","$username","$psword")
or die("Can't connect to server" . mysql_error());
if($server_link){
echo "Connect successfully!<br>";
$logon_flag = 1;
}
if($logon_flag == 0){
echo "<script language='javascript'>";
echo "alert('Sorry,Wrong userName or Password!');";
echo "history.back();";
echo "</script>";
}
if($logon_flag == 1){
$db_link = mysql_select_db("$dbName",$server_link) or die ("Can't use database f2:" . mysql_error());
$sql = "SELECT * FROM $tableName";
$result = mysql_query($sql,$server_link) or die("Invalid query:" . mysql_error());
$i = 0;
while($rows = mysql_fetch_array($result)){
// $arr1[$i][0] = $rows["id"];
// $arr1[$i][1] = $rows["a"];
//$arr1[$i][2] = $rows["b"];
//$arr1[$i][3] = $rows["c"];
$address[$i] = $rows["IDC_NAME"];
$delay_time[$i] = $rows["Delay_Time"];
$i++;
}
mysql_free_result($result);
mysql_close($server_link);
// $address = $arr1[2][1];
//$delay = $arr1[2][0];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
//实际查询地址
//var query = "辽宁沈阳文化路三号巷11号";
var query = "东北大学北门";
//显示名称
//var display = "<b>单位：</b>东北大学";
var display = "<b>Delay：</b><?php echo "$delay_time[0]" ?>";
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom : 1,//缩放比例
//地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE
//•MapTypeId.HYBRID •MapTypeId.TERRAIN
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
codeAddress();
codeAddress1();
codeAddress2();
}
function codeAddress() {
//var address = query;
var address = "<?php echo "$address[0]" ?>";
var display = "<b>Delay：</b><?php echo "$delay_time[0]" ?>" + " ms"; //javascript引用php变量
//地址解析
geocoder.geocode({
'address' : address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//依据解析的经度纬度设置坐标居中
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location,
title : address,
//坐标动画效果
animation : google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content : "<span style='font-size:11px'><b>IDC：</b>"
+ address + "<br>" + display + "</span>",
//坐标偏移量，一般不用修改
pixelOffset : 0,
position : results[0].geometry.location
});
//默认打开信息窗口,点击做伴弹出信息窗口
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("未能解析该地址的原因: " + status);
}
});
}
function codeAddress1() {
//var address = query;
var address = "<?php echo "$address[1]" ?>";
var display = "<b>Delay：</b><?php echo "$delay_time[1]" ?>" + " ms";
//地址解析
geocoder.geocode({
'address' : address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//依据解析的经度纬度设置坐标居中
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location,
title : address,
//坐标动画效果
animation : google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content : "<span style='font-size:11px'><b>IDC：</b>"
+ address + "<br>" + display + "</span>",
//坐标偏移量，一般不用修改
pixelOffset : 0,
position : results[0].geometry.location
});
//默认不打开信息窗口,点击做伴弹出信息窗口
//infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("未能解析该地址的原因: " + status);
}
});
}
function codeAddress2() {
//var address = query;
var address = "<?php echo "$address[2]" ?>";
var display = "<b>Delay：</b><?php echo "$delay_time[2]" ?>" + " ms";
//地址解析
geocoder.geocode({
'address' : address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//依据解析的经度纬度设置坐标居中
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location,
title : address,
//坐标动画效果
animation : google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content : "<span style='font-size:11px'><b>IDC：</b>"
+ address + "<br>" + display + "</span>",
//坐标偏移量，一般不用修改
pixelOffset : 0,
position : results[0].geometry.location
});
//默认不打开信息窗口,点击做伴弹出信息窗口
//infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("未能解析该地址的原因: " + status);
}
});
}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px;"></div>
</body>
</html>
结果截图：
数据表IDC内容及表结构截图如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
