谷歌地图标记不会在复选框操作时删除

Question

>我在尝试过滤复选框操作时从数据库中获取的列表并在地图上绘制/清除标记时遇到了一些问题。这是我在 HTML 中的复选框声明：

<div class="">
     <label>
          <input type="checkbox" class="js-switch" name="tags" value="3" onchange="filterList()" unchecked/> MRT Incidents
     </label>
</div>

当复选框更改时，我正在过滤从数据库中获取的列表：

        function filterList(){
        var tags = document.getElementsByName('tags');
        var i = 0;
        {% for crisis in data %}  
            // code to store fields in database into local var
            for( ; i < tags.length; i++ )
            {
                if( tags[i].checked ) {
                    value = tags[i].value;
                    // I got 4 category 1-fire, 2-flood, 3-mrt, 4-dengue
                        // what I am doing here is check if the checkbox value is equal to the category ID from database, if equal, I push them into the filteredList
                    if(value == category){
                        filteredList.push({
                            // all the fields
                        });
                    }                        break;
                }else{
                        value = tags[i].value;
                        if(value == category){
                            filteredList = [];
                            setMapOnAll(null);
                        }
                    }
            }
        {% endfor %}
    addMarker(filteredList);
    }

然后在我的addMark中带有filteredList参数：

function addMarker(filteredList){ 
        for(var i = 0; i < filteredList.length; i++){
        myLatLng = {lat: parseFloat(filteredList[i].lat), lng: parseFloat(filteredList[i].lng) };
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            clickable: true
        });
}

我的绘图也很奇怪。当我尝试选中多个框时，假设我选中了第一个框，它绘制出来了。然后我继续检查第二个，它不会绘制出来，而是在我取消选中第一个后才绘制出来。

当我尝试取消选中该复选框时，地图上的标记不会被删除。相反，它只是永远留在那里，当我检查/取消选中几次时，它堆叠得越来越多。

为什么会这样？提前感谢！

Answer 1

从我在您的代码中看到的内容来看，您一遍又一遍地添加标记？这可能解释了为什么你有奇怪的绘图(你迟早会耗尽内存(。我认为您在谷歌地图上的标记过滤中使用了错误的方法。

您需要对代码进行更改，以下是主要准则：

• 您需要一个数组/对象来存储您放置在地图上的所有标记对象
• 您可以将每个标记的分类存储在同一对象中，即 [{markerObj:marker, categories:[1,5,6]}]
• 当复选框更改(onchange(时，您遍历所有复选框并获取其值，然后遍历标记数组/对象中的所有标记并检查是否需要对其进行过滤。
• 如果你想隐藏一个标记，只需调用setVisible函数，即 markerObj.setVisible(false)

这是一个工作示例！https://jsfiddle.net/fjqagp8o/1/

Answer 2

您需要在添加新标记之前删除标记。

我在Android的Google Map API上工作，我没有访问现有标记的方法，所以我不确定这对于javascript是否也正确。
所以我所做的是在将它们添加到 HashMap 中时将它们放置并一一删除。

这是安卓的代码：

private void clearAllPins() {
    for (Marker marker : markersMap.values()) {  //in your case a simple array might sufice
        marker.remove();
    }
    clientsMarker.clear();
}

Answer 3

要删除(隐藏(您必须使用的标记

 marker.setMap(null);

您的问题似乎与您没有添加的标记集合有关。然后，您不能为此标记设置为空地图如果您有此集合，则可以隐藏所有集合，然后添加新集合