将谷歌地图侧边栏链接绑定到标记答案

【问题标题】：Binding google map sidebar links to markers将谷歌地图侧边栏链接绑定到标记
【发布时间】：2013-10-18 07:13:28
【问题描述】：

我有一张使用 Google Maps 的 Javascript API 创建的地图，其中包含每个被映射位置的标记。然后，我在地图外部的侧边栏中为每个位置提供了一个链接，单击该链接会打开相关位置的信息窗口。这一切都很好。我想弄清楚的是如何使绑定“走另一条路”，以便当我单击其中一个标记时，突出显示相应的链接（这些是页面上的列表项）。在为地图创建标记时，它们存储在数组中，数组位置随后嵌入到链接中，因此点击函数只需获取数组中的标记位置：

side_bar_html += '<li id="li-'+ (markersArray.length-1) + '"><a href="javascript:myclick(' + (markersArray.length-1) + ')">' + address[1] + '<\/a></li>';    

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    google.maps.event.trigger(markersArray[i], "click");
}

我一直在查看 google.maps.Marker 类，希望有一些东西可以用来做这个绑定，但到目前为止还没有找到我要找的东西。基本上我需要的是标记的 addListener 函数，一个唯一的标签或 id 值，我可以将其嵌入到链接中，以便 jQuery 查找调用可以突出显示链接以显示已单击的链接。

我过去所做的只是在 jQuery 查找返回的节点上添加调用 addClass ，但这不起作用。当我执行“检查元素”时，链接显示正确，但未添加我尝试添加以进行突出显示的类。

Google 地图在其地图结果中内置了此功能。感谢您的任何建议。

这是我尝试通过向链接节点添加类来处理点击的代码：

google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(address[0]);
                    infowindow.open(map, this);

$("#marker_links").find(".currentlySelected").removeClass("currentlySelected");
var linkItem = $("#marker_links").find("#li-" + markersArray.length-1);
linkItem.addClass('currentlySelected');                     


                });

currentSelected 定义为：

nav li.currentlySelected {
    border: 0;
    background-color: white;
    color: #6d6e71;
}

如果我将 linkItem 记录到控制台，我会得到看似有效的对象，但 addClass 不会坚持...

【问题讨论】：

点击事件应与创建标记的代码一起定义。在此处添加该代码或将代码添加到小提琴中会有所帮助。

标签： javascript google-maps

【解决方案1】：

以下是绑定到标记点击事件的方法：

google.maps.event.addListener(marker, 'click', function () {
    // highlight link here
});

见Fiddle。

【讨论】：

【解决方案2】：

通过为每个列表元素创建一个 Backbone 视图并从 addListener 单击处理程序中调用它的高亮函数，在每次迭代期间在基础模型中设置标记数组位置来解决此问题。感谢 Fiddle 链接，它帮助我了解我做错了什么。

【讨论】：