我试图弄清楚如何让出现在外部 div 中的链接触发相应地图标记上的点击事件(打开信息窗口)。我认为我的代码是可靠的(除了我尝试复制位置数据数组以获取能够访问数组的地方,因为我遇到了范围障碍 - 我只是不知道该怎么做才能让它工作对。任何人都可以阐明我需要在我的代码中修改什么吗?谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Untitled Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
var gmarkers = [];
function initialize() {
var locations = [
['DESCRIPTION', 41.926979, 12.517385, 3],
['DESCRIPTION', 41.914873, 12.506486, 2],
['DESCRIPTION', 61.918574, 12.507201, 1]
];
window.map = new google.maps.Map(document.getElementById('map'), {
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
// CREATE THE MARKERS ON THE MAP FROM THE ARRAY DATA
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
gmarkers.push(marker);
bounds.extend(marker.position);
// ADD A LINK FOR THIS MARKER TO THE DIV, WHEN CLICKED, IT SHOULD TRIGGER THE MARKER CLICK / INFO WINDOW FOR COORESPONDING MARKER
$('#listdiv').append('<p><a href="javascript:show(' + i + ')" id="link' + i + '">' + locations[i][0] + '</a>');
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
//map.setZoom(10); // NO LONGER NEED, SINCE FITBOUNDS SCALES VIEW TO SHOW ALL MARKERS?
google.maps.event.removeListener(listener);
});
}
// THIS FUNCTION IS SUPPOSED TO BE CALLED ON THE EXTERNAL LINK CLICKS - SHOULD OPEN THE COORESPONDING MARKER/INFO WINDOW.
function show(i) {
google.maps.event.trigger(gmarkers[i], 'click');
alert("I see a click.");
}
</script>
</head>
<body onload="initialize();" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<div id="map" style="width: 100%; height: 300px;"></div>
<div id="listdiv" style="width:100%; border: 2px solid blue; color: black; font-family: Arial, Helvetica, sans-serif; font-size:14px;"></div>
</body>
</html>