使用Google地图帮助创建多个InfoWindows

时间:2011-01-14 02:27:21

标签: php javascript google-maps

我正在创建一个php页面,它从mysql表中加载cordinates并使用它们在google地图上创建标记。它工作正常。我还添加了信息窗口,但问题是所有标记的信息窗口上的内容都显示了表格中最后一个标记的内容。以下是代码:

<?php
include("php/db.php");
$db = new dbAccess($db_host,$db_user,$db_pass, $db_db, true);
$db->query("select * from tbl_gps;", false);
    while($row_gps = $db->fetchrow()){
        $gps_list .= "['".$row_gps['gps_title']."', ".$row_gps['lat_dec'].", ".$row_gps['long_dec'].", ".$row_gps['gps_order']."],\n";
    }

?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Aerial View Of Federal Polytechnic Bauchi</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var myOptions = {
    zoom: 17,
    center: new google.maps.LatLng(10.256817, 9.771996),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, struct);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var struct = [
<?php echo $gps_list; ?>

];
var markers = new Array();
function setMarkers(map, locations) {
 var infowindow = null;

  for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: location[0],
        zIndex: location[3]
    });

/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});


google.maps.event.addListener(marker, 'click', function () {

// where I have added .html to the marker object.
infowindow.setContent(location[0]);
infowindow.open(map, this);
});

    }


}
</script>
</head>
<body style="background-color:#000" onload="initialize()">

  <div id="map_canvas" style="height:95%; width:100%"></div>

</body>
</html>

1 个答案:

答案 0 :(得分:2)

好吧,你的代码有javascript关闭的问题。在循环中附加事件侦听器时,这是常见问题。尝试理解并遵循http://code.google.com/apis/maps/documentation/javascript/examples/event-closure.html