Question

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

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，但这不起作用。当我执行“Inspect element”时，链接显示正确但是我正在尝试添加的类以进行突出显示没有被添加。

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

Answer 1

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

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

请参阅Fiddle。

Answer 2

通过为每个列表元素创建一个Backbone视图并从addListener click处理程序中调用它的highlight函数来解决这个问题，在每次迭代期间在底层模型中设置markers数组位置。感谢Fiddle链接，它帮助我看到我做错了什么。

将Google地图侧边栏链接绑定到标记

2 个答案: