Google Map API - 無法在for循環中刪除標記

Question

我使用JSON數據填充Google地圖，我有一些複選框可以選擇要在地圖上顯示的數據類別。 當我點擊複選框時，它通過Ajax調用一個新的JSON數據，當我取消選中一個框時，它會循環所有標記的數組，並刪除所有未選中類別的標記。

它大部分時間都在使用，但有時標記會消失並再次出現。看來，他們仍然數組或東西...

$("input[type=checkbox]").change(function() { 
     var data =''; 
     var checkbox = $(this); 
     var checkboxVal = $(this).val(); 
     console.log('click'); 

     if (checkbox.is(':checked')) { 
      $('.loader').show(); 

      $("input:checkbox[name=poi_categories]:checked").each(function() { 
       data = data + checkboxVal + ','; 
       $.ajax({ 
        type: "POST", 
        url: window.location.pathname, 
        data: "categorie=" + data, 
        success:function(response){ 

         json = JSON.parse(response); 

         for (var i = 0; i < json.length; i++) { 
          createMarker(json[i], data); 
         } 
         $('.loader').hide(); 
        } 
       }); 
      }); 
     } else { 

      for (var i in markersArray) { 
       if (markersArray[i] != undefined) { 
        if(null == markersArray[i].cat || markersArray[i].cat == checkboxVal) { 
         markersArray[i].setMap(null); 
         delete(markersArray[i]); 
        } 
       } 
      } 
     } 
    }); 

在我敢肯定沒有在最後一個錯誤的循環，但我看不出有什麼...

編輯：

這裏是整個JS代碼：http://jsfiddle.net/5bMQm/

Answer 1

編輯：我明白你現在要做什麼。

for (var i = 0, l = markersArray.length; i < l; i++) { 
    if (markersArray[i] != undefined) { 
    if(null == markersArray[i].cat || markersArray[i].cat == checkboxVal) { 
     markersArray[i].setMap(null); 
     markersArray.splice(i, 1); 
     i--; l--; 
    } 
    } 
} 

Answer 2

完全誤會了。您可以多次執行此操作，每次用戶點擊一個複選框 - 這就是爲什麼您想要從markersArray中移除從地圖中移除的標記。

認爲我發現了潛在的問題。

你有

createMarker(json[i], data); 

但只有

function createMarker(marker) { 

設置

cat : marker.img 

但

markersArray[i].cat == checkboxVal 

比較0

你認爲（我猜的）應該包含

var checkboxVal = $(this).val(); 
.. 
data = data + checkboxVal + ','; 

，但從來沒有呢！ 數據/ checkboxval永遠不會分配給您的標記！

---

for (var i in markersArray) { 
    if (markersArray[i] != undefined) { 
     if(null == markersArray[i].cat || markersArray[i].cat == checkboxVal) { 
      markersArray[i].setMap(null); 
      markersArray[i] = undefined; // <--- 
     } 
    } 
} 
//cleanup 
for (var i=markersArray.length;i>0;i--) { 
    if (markersArray[i]==undefined]) { 
     markersArray.splice(i, 1); 
    } 
} 

Answer 3

它的作品大部分時間，但有時標記消失，再次出現。看起來，他們仍然在陣列或東西

您的代碼，因爲它是我的預期，當一切按預期工作。

但是這個問題（假設你的服務器端腳本返回的響應總是正確的）：

你不能想到的是，AJAX的迴應以相同的順序，因爲他們已經到達sended（有時有可能單個請求的延遲很大）。它可以例如發生在你身上

1. 點擊一個框，檢查
2. 再次單擊該框以取消它

當響應以相反的順序到達您將創建標記雖然目前框未選中。

可能的解決辦法：（但有一個更好的，見下文）

添加額外檢查的開始createMarker

if(!$('input[type="checkbox"][name="poi_categories"][value="'+marker.img+'"]').is(':checked'))return; 

另一個問題：似乎有一個reduntant部分在您的腳本中，

$("input:checkbox[name=poi_categories]:checked").each(function() { 
    /*ajax-code*/ 
}); 

這對我沒有任何意義，假設您已經檢查了5 c heckboxes和最後點擊的複選框的值爲例如「酒店」，你會發送categories=hotel,hotel,hotel,hotel,hotel，我不認爲你的服務器端腳本會爲此返回任何標記。根本不需要遍歷選中的標記。

這應該是足夠了：

if (checkbox.is(':checked')) { 
       $('.loader').show(); 

        $.ajax({ 
         type: "POST", 
         url: window.location.pathname, 
         data: "categorie=" + checkboxVal, 
         success:function(response){ 

          json = JSON.parse(response); 

          for (var i = 0; i < json.length; i++) { 
           createMarker(json[i], data); 
          } 

          $('.loader').hide(); 
         } 
        }); 

      } 

下面是更好的解決方案，以避免重大問題的好點。與創建標記前檢查複選框的選中屬性不同的是，最好中止最近的請求：

var checkbox = $(this); 
    var checkboxVal = $(this).val(); 
    console.log('click'); 
    //if there has been a recent request, abort it 
    if(checkbox.data('xhr')){ 
     checkbox.data('xhr').abort();console.log('recent request aborted'); 
    } 
    if (checkbox.is(':checked')) { 
     $('.loader').show(); 

      data = data + checkboxVal + ','; 
      //store the jqXhr within the checkbox-data 
      //to be able to abort it later 
      checkbox.data('xhr',$.ajax({ 
       type: "POST", 
       url: window.location.pathname, 
       data: "categorie=" + checkboxVal, 
       success:function(response){ 

        json = JSON.parse(response); 

        for (var i = 0; i < json.length; i++) { 
         createMarker(json[i], data); 
        } 

        $('.loader').hide(); 
       } 
      })); 

    } else {/* your code*/}