チェックボックスのアクション時にGoogleマップマーカーが削除されない

Question

チェックボックスの操作や地図上のマーカーの描画/消去時に、データベースから取得したリストをフィルタリングしようとして問題が発生しました。

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

ここではHTMLでの私のチェックボックスの宣言があります私の作図は変わった。複数のボックスをチェックしようとすると、最初のボックスをチェックしたとしましょう。その後、私は第2のチェックを進めます。プロットしませんが、最初のチェックボックスをオフにしてからプロットするだけです。

チェックボックスをオフにすると、マップ上のマーカーは削除されません。代わりに、それはちょうどそこにとどまり、数回チェック/チェックを外すとますます積み重なります。

なぜそうですか？前もって感謝します！

Answer 1

あなたのコードを見て、マーカーを何度も何度も追加していますか？これはおそらくあなたが奇妙なプロットをしている理由を説明します（そして、あなたは遅かれ早かれメモリを使い果たします）。私はあなたがGoogleマップ上のマーカーフィルタリングに間違ったアプローチを使用していると思います。ここ

あなたがあなたのコードに変更を加える必要があります

は、主なガイドラインは以下のとおりです。

• あなたが保存することができますが、マップ
• に配置されているすべてのマーカーオブジェクトを格納する配列/オブジェクトが必要です同じオブジェクト内の各マーカーのカテゴリ番号 [{markerObj:marker, categories:[1,5,6]}]
• チェックボックスが変わると（オンオフ）、すべてのチェックボックスをループして値を取得し、マーカー配列/オブジェクト内のすべてのマーカーをループしてチェックしますフィルタリングする必要があるかどうかを判定します。
• あなたがマーカーを非表示にする場合だけ、すなわちmarkerObj.setVisible(false)
のsetVisible関数を呼び出す

ここで作業例です！ https://jsfiddle.net/fjqagp8o/1/

Answer 2

新しいマーカーを追加する前に、マーカーを削除する必要があります。

私はAndroidのGoogle Map APIで働いていました。私は既存のマーカーにアクセスする方法がなかったので、これがjavascriptでも正しいかどうかはわかりません。
これをHashMapに追加して1つずつ削除するときに、それらを入れました。

アンドロイドのためのコードです：

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

あなたの問題は、あなたがのコレクションを持っていないという事実に関連すると思われますあなたが追加したマーカー。このマークのヌルマップに設定することはできません このコレクションをお持ちの場合は、すべてを隠してから新しいものを追加できます。