Question

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

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

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

        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);
    }

然后在带有filteredList参数的addMarker中：

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

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

我在Android的谷歌地图API上工作，我没有办法访问现有的标记，所以我不确定这是否也适用于javascript。
所以我所做的就是在将它们添加到HashMap中时将它们逐一删除。

这是android的代码：

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

Answer 2

要删除（隐藏）标记，您必须使用

 marker.setMap(null);

您的问题似乎与您没有添加标记的事实有关..然后您无法将此标记设置为空地图如果你有这个集合，你可以隐藏所有，然后添加新的

Answer 3

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

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

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

这是一个有效的例子！ https://jsfiddle.net/fjqagp8o/1/

Google地图标记不会在复选框操作时移除

3 个答案: