makeMarker() 谷歌地图侧边栏格式

Question

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

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

我已将this 页面放在一起，该页面允许用户显示和隐藏与他们选择的“类别”复选框相关的 Google 地图标记和关联的“侧边栏”项目。

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

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

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

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

非常感谢和亲切的问候

Answer 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;   
}​