Question

使用google maps（和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);

但是，我现在希望能够将标记的“点击”链接到可以更新页面其他部分的功能。例如，我想有一个带有标记infowindow内容副本的侧边栏。左侧google maps shows results和右侧标记的方式相同。我甚至可能希望单击侧边栏内容在地图上打开给定的标记信息窗口。

问题是GMarker点击事件只传递纬度/经度 - 而且我不知道如何使用它来找到匹配的div或其他。

如何为每个标记获取唯一的ID /句柄？

Answer 1

为每个标记及其侧栏中的相应元素指定一个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...
    });
}

另见this question。

Answer 2

对于那些感兴趣的人，这里有一个很好的例子l inking dom elements with markers。基本上，您只需创建一个全局JS数组，该数组包含对每个标记对象的引用。

如何将Google地图标记链接到其他元素？

2 个答案: