Google Maps Api - 標記類別的活動類

Question

我有一個帶有菜單的Google地圖，可以顯示/隱藏多個標記類別。我試圖通過所有活動的列表項目一個類=「活躍」，但不能使其工作。

我覺得應該與點擊功能工作：

//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

你需要傳遞「這'一起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'); 
    } 
    } 
}