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