0

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

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 find 返回的节点上添加调用 addClass ,但这不起作用。当我执行“检查元素”时,链接显示正确,但未添加我尝试添加以进行突出显示的类。

谷歌地图在他们的地图结果中内置了这个功能。感谢您的任何建议。

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

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 不会坚持...

4

2 回答 2

0

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

于 2013-10-12T01:30:07.300 回答
0

这是绑定到标记单击事件的方法:

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

小提琴

于 2013-10-10T14:07:12.773 回答