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

【问题标题】：How do I link Google Maps Markers to other elements?如何将 Google 地图标记链接到其他元素？
【发布时间】：2009-10-12 05:03:05
【问题描述】：

使用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);

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

问题是 GMarker 点击事件只传递了纬度/经度 - 我不确定如何使用它来找到匹配的 div 或其他什么。

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

【问题讨论】：

标签： javascript google-maps

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：