0
我正在使用下面的代碼將HTML列表鏈接到地圖上的標記。當我點擊標記時，InfoWindow可以毫無問題地打開。但是，當我點擊列表項時，儘管地圖正確擺放並居中於適當的標記，但我無法同時打開InfoWindow。無法在地圖上打開Infowindow Pan
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
div#locationslist div{
cursor:pointer; }
</style>
<div id="map"></div>
<div id="locationslist"></div>
<body onload="showLocations()">
<script type="text/javascript">
var map;
var gmarkers = new Array();
var locationslist;
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("loadmylocations.php", function(data) {
var xml = data.responseXML;
gmarkers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i].getAttribute("locationname");
var address = gmarkers[i].getAttribute("address");
var locationid = gmarkers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(gmarkers[i].getAttribute("osgb36lat")),
parseFloat(gmarkers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
});
}
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index].getAttribute("osgb36lat")),
parseFloat(gmarkers[index].getAttribute("osgb36lon"))
);
map.panTo(point);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</head>
</body>
</html>
更新的代碼
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
div#locationslist div{cursor:pointer; }
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 70%; width:70% }
</style>
<script type="text/javascript">
var map;
var gmarkers = [];
var locationslist = "";
var arrMarkers = []; // add our markers to this array
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("loadmylocations.php", function(data) {
var xml = data.responseXML;
gmarkers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i]["locationname"];
var address = gmarkers[i]["address"];
//var locationid = gmarkers[i]["locationid"];
var point = new google.maps.LatLng(
parseFloat(gmarkers[i]["osgb36lat"]),
parseFloat(gmarkers[i]["osgb36lon"]));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point
});
arrMarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
});
}
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index]["osgb36lat"]),
parseFloat(gmarkers[index]["osgb36lon"])
);
map.panTo(point);
google.maps.event.trigger(arrMarkers[index], 'click');
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onload="showLocations()">
<div id="map"></div>
<div id="locationslist"></div>
</body>
</html>
嗨，非常感謝您的幫助。原諒我，當談到這一點時，我有點新手，但是我應該採取這個正確的方向？ map.panTo（point）; 函數bindInfoWindow（marker，map，infoWindow，html）google.maps.event.addListener（gmarkers，'click'，function（）{ infoWindow.setContent（html）; infoWindow.open（map，gmarkers）; }）; } } 親切的問候。 Chris – IRHM
不完全;我會看看我是否可以稍後發佈一個工作示例 – duncan
嗨Duncan，對代碼的誠摯感謝。我在這裏非常密集，但我無法得到它的工作。我試圖包括鏈接我的PHP文件，但得到以下錯誤對象預計行28字符7指向此行： downloadUrl（「loadmylocations.php」，函數（數據）{ 我已更新我的原始文章顯示我修改code.I只是想知道你是否可能請看看這個，讓我知道我要去哪裏錯了，我想這可能是因爲我試圖爲每個不在那裏的標記獲取屬性，但我可以好的問候Chris – IRHM