Question

我有一个带有菜单的Google地图，可显示/隐藏多个标记类别。我试图将所有活动的列表项传递给一个class =“active”但是无法使它工作。

我认为它应该适用于点击功能：

//toggle visibility of Marker Categories
function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}

这是小提琴：

http://jsfiddle.net/vanith/upn9qms0/10/

非常感谢每一个帮助

Answer 1

你需要通过这个＆＃39;沿着javascript并使用它。我默认使class = active，因为所有选项都被选中。他们在选择时切换。

http://jsfiddle.net/icemanreddy/xLou9wx3/15/

HTML

<div class="filters">
  <ul>
    <li id="bar" onclick="toggleGroup('bar',this);" class="active"><img src="http://www.vanith.de/img/icon_bar.png" /> Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel',this)"  class="active"><img src="http://www.vanith.de/img/icon_hotel.png" /> Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant',this)"  class="active"><img src="http://www.vanith.de/img/icon_restaurant.png" /> Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping',this)"  class="active"><img src="http://www.vanith.de/img/icon_shopping.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit',this)"  class="active"><img src="http://www.vanith.de/img/icon_freizeit.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur',this)"  class="active"><img src="http://www.vanith.de/img/icon_kultur.png" /> Kunst & Kultur</li>
    <li class="map-print">Drucken</li>
  </ul>
</div>
<div id="map" style="width: 100%; height: 400px"></div>

JS

 //toggle visibility of Marker Categories
function toggleGroup(type,elem) {
    for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }
}

Google Maps Api - 标记类别的有效课程

1 个答案: