谷歌地图：隐藏标记组答案

【问题标题】：Google map : Hiding group of markers谷歌地图：隐藏标记组
【发布时间】：2016-02-22 21:04:58
【问题描述】：

我想在我的地图中隐藏一组标记，并且我每 10 秒重新加载所有标记，问题是，每次重新加载标记时，所有隐藏的标记都会显示出来。我使用复选框来隐藏多个类别的标记。

var markerGroups = {
            "Fire": [],
            "Flood": [],
            "Terrorism  ": [],
            "station": []
           };


setInterval(reload,10000);
function createMarker(map){
    var type;
    for (var i = 0; i < _newPointA['point'].length; i++) {
         type = _newPointA['type'][i];
        var icon = customIcons[type] || {};
        var myLatLng = new google.maps.LatLng(_newPointA['lat'][i],_newPointA['long'][i]);
        var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon :icon.icon
    });
        newMarker.push(marker);
        bindInfoWindow(marker,map,infoWindow, _newPointA['html'][i]);
        if (!markerGroups[type]){
                markerGroups[type] = [];
            }
        markerGroups[type].push(marker);

        }       

  }


function toggleGroup(type) {
        for (var i = 0; i < markerGroups[type].length; i++) {
            var toggle_marker = markerGroups[type][i];
                if (!toggle_marker.getVisible()) {
                    toggle_marker.setVisible(true);
                } else {
                    toggle_marker.setVisible(false);
                }
            }
    }
function reload(){
    for (var i=0; i<newMarker.length; i++) {

    newMarker[i].setMap(null);
    }

   // Reset the markers array
   newMarker = [];

   // Call set markers to re-add markers
   createMarker(map);

}

用于我的 html 中的工具组

<table id = "legend_table">
                    <tr>
                        <th style = "width:20px;"></th>
                        <th style = "width:100px;"></th>
                    </tr>
                    <tr>
                        <td><input type ="checkbox" name = "fire_checkbox" onClick="toggleGroup('Fire')" checked = "checked"/></td>
                        <td><img src="img/Markers/fire.png"> Fire </td>
                    </tr>
                    <tr>
                        <td><input type = "checkbox" name = "flood_checkbox" onClick="toggleGroup('Flood')" checked = "checked"/></td>
                        <td><img src="img/Markers/flood.png"> Flood </td>
                    </tr>
                    <tr>
                        <td><input type = "checkbox" name = "terror_checkbox" onClick="toggleGroup('Terrorism')" checked = "checked"/></td>
                        <td><img src="img/Markers/terrorism.png"> Terrorism </td>
                    </tr>

                </table>

【问题讨论】：

您有函数reload 和toggleGroup，但您的代码中没有任何地方调用这两个函数。每 10 秒调用一次的代码在哪里？
@duncan：我忘了包括 setInterval(reload,10000);
什么时候调用toggleGroup？
当我单击我的 html 中的复选框之一时

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

您需要做的是跟踪隐藏和显示的类别。在这里，我扩展了您的 markerGroups 以包含一个布尔值，您可以在切换复选框时更新该值。然后每次重新加载标记时，根据其状态设置每个标记的可见属性。

var markerGroups = {
    "Fire": {
        markers: [],
        visible: true
    },
    "Flood": {
        markers: [],
        visible: true
    },
    "Terrorism": {
        markers: [],
        visible: true
    },
    "station": {
        markers: [],
        visible: true
    }
};


setInterval(reload, 10000);

function createMarker(map) {
    var type;
    for (var i = 0; i < _newPointA['point'].length; i++) {
        type = _newPointA['type'][i];
        var icon = customIcons[type] || {};
        var myLatLng = new google.maps.LatLng(_newPointA['lat'][i], _newPointA['long'][i]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: icon.icon
        });
        newMarker.push(marker);
        bindInfoWindow(marker, map, infoWindow, _newPointA['html'][i]);
        if (!markerGroups[type]) {
            markerGroups[type] = {
                markers: [],
                visible: true
            };
        }

        marker.setVisible(markerGroups[type].visible);
        markerGroups[type].markers.push(marker);
    }
}


function toggleGroup(type) {
    // toggle the 'visible' property for this type
    markerGroups[type].visible = !markerGroups[type].visible;

    for (var i = 0; i < markerGroups[type].markers.length; i++) {
        markerGroups[type].markers.[i].setVisible(markerGroups[type].visible);
    }
}

function reload() {
    for (var i = 0; i < newMarker.length; i++) {

        newMarker[i].setMap(null);
    }

    // Reset the markers array
    newMarker = [];

    // Call set markers to re-add markers
    createMarker(map);
}

【讨论】：