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

Question

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

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

我整理了this允许用户显示和隐藏 Google map 标记以及与他们选择的“类别”复选框相关的相关“边栏”项目的页面。

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

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

我已经尝试让这个工作好一段时间了，但我似乎只是在原地打转。

我只是想知道是否有人可以查看此内容并就我如何实现此目标提供一些指导。

非常感谢和亲切的问候

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 中的描述文本变量从不包含引号 '或双引号 "这会使上面的代码失败。

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

此外，如果您还希望在单击 map 的任何地方(例如单击标记外部)时也从侧边栏链接中删除背景颜色，请替换以下代码:

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"> block :

#sidebar a:hover{
   background-color: #58FAD0;   
}​