2

我想知道是否有人可以帮助我。

首先，我对此比较陌生，所以请您耐心等待。

我整理了这个页面，它允许用户显示和隐藏与他们选择的“类别”复选框相关的谷歌地图标记和相关的“侧边栏”项目。

我现在正在尝试并且很难做到的是更改侧边栏的格式，使其类似于此页面上显示的格式。

与上面链接中的示例一样，我还想添加一个功能，如果单击地图标记，相关的侧边栏项目就会突出显示。

我一直在努力让它工作很长一段时间，但我似乎只是在绕圈子。

我只是想知道是否有人可以看看这个，并就我如何能够实现这一目标提供一些指导。

非常感谢和亲切的问候

4

1 回答 1

1

我试了一下，只需替换您的以下代码：

google.maps.event.addListener(marker, 'click', function() { 
   infowindow.setContent(contentString);
   infowindow.open(map,marker); 
});

对于这个：

google.maps.event.addListener(marker, 'click', function() { 
   infowindow.setContent(contentString);
   $("#sidebar a").css('background-color','');//remove sidebar links back colors
   sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
   sidebarlink.css('background-color','#58FAD0');
   infowindow.open(map,marker); 
});

这将为侧边栏链接设置背景颜色，您可以将颜色更改为您想要的任何颜色，或将您喜欢的任何其他 CSS 样式添加到您的链接。

还要确保mydescription变量中的描述文本永远不会包含'引号或双引号"，因为这会使上面的代码失败。

让我知道这是否按您的预期工作。

此外，如果您还希望在单击地图的任何位置（例如单击标记外部）时从侧边栏链接中删除背景颜色，请通过替换以下代码来实现：

google.maps.event.addListener(map, 'click', function() { 
   infowindow.close(); 
});

对于这个：

google.maps.event.addListener(map, 'click', function() { 
   $("#sidebar a").css('background-color','');//remove sidebar links back colors
   infowindow.close(); 
});

要在侧边栏链接上悬停时更改背景颜色（问题 1），只需将以下 CSS 代码添加到您的任何<style type="text/css">块中：

#sidebar a:hover{
   background-color: #58FAD0;   
}​
于 2012-09-27T15:45:56.123 回答