使用谷歌地图 http://code.google.com/apis/maps/documentation/reference.html(和 JavaScript)我已经能够轻松地显示几个标记,每个标记上都有一个漂亮的小信息窗口。
//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);
//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
}
var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);
但是,我现在希望能够将标记的“点击”链接到也可以更新页面其他部分的函数。例如,我想要一个侧边栏,其中包含标记信息窗口内容的副本。一样的方法位于左侧,标记位于右侧。我什至可能希望单击侧边栏内容来打开地图上给定的标记信息窗口。
问题是GMarker http://code.google.com/apis/maps/documentation/reference.html#GMarkerclick 事件仅传递纬度/经度 - 我不确定如何使用它来查找匹配的 div 或其他内容。
如何为每个标记获取唯一的 ID/句柄?
为每个标记及其在侧栏中的相应元素分配一个 id。创建一个事件侦听器来调用该 id。像这样的东西:
var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)
//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function(latlng) {
var div = document.getElementById(id); //access the sidebar element
// etc...
});
}
也可以看看这个问题 https://stackoverflow.com/questions/1490266/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)