Javascript 谷歌地图API-can'；t在for循环中删除标记

我用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]);
                    }
                }
            }
        } 
    });

$（“输入[type=checkbox]”）。更改（函数（）{
var数据=“”；
var复选框=$（此）；
var checkboxVal=$（this.val（）；
console.log（'click'）；
if（checkbox.is（'：checked'））{
$（'.loader'）.show（）；
$（“输入：复选框[name=poi_categories]：选中”）。每个（函数（）{
数据=数据+复选框val+'，'；
$.ajax({
类型：“POST”，
url:window.location.pathname，
数据：“分类=”+数据，
成功：功能（响应）{
json=json.parse（响应）；
for（var i=0；i

我很确定最后一个for循环中有一个错误，但我看不出是什么

编辑：

---

下面是完整的Js代码：

编辑：我理解你现在想做什么

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

for（var i=0，l=markersArray.length；i

完全误解了。每次用户单击复选框时，您都会多次执行此操作——这就是为什么您还希望从markersArray中删除从地图中删除的标记

我想我已经发现了潜在的问题

你有

createMarker(json[i], data);

但只是

function createMarker(marker) {

你设定

cat : marker.img

但与

markersArray[i].cat == checkboxVal

你认为（我猜）应该包含哪些内容

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

但从来没有data/checkboxval从未分配给您的标记

---

for（markersArray中的变量i）{
if（markersArray[i]！=未定义）{
if（null==markersArray[i].cat | | markersArray[i].cat==checkboxVal）{
markersArray[i].setMap（空）；
markersArray[i]=未定义；//0；i--）{
if（markersArray[i]==未定义]）{
标记阵列拼接（i，1）；
}
}

它在大多数情况下都有效，但有时标记会消失并再次出现。它们似乎仍在数组中或其他位置

当一切都按预期工作时，您的代码按预期工作

但问题是（假设服务器端脚本返回的响应总是正确的）：

您不能期望AJAX响应以与发送相同的顺序到达（有时单个请求可能会有巨大的延迟）

单击一个框以选中它

再次单击该框以取消选中它

当响应以相反的顺序到达时，您将创建标记，尽管该框当前未选中

可能的解决方案：（但有一个更好的解决方案，见下文）

在

createMarker

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

另一个问题：在你的剧本中似乎有一个多余的部分

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

这对我来说没有任何意义，假设您选中了5个复选框，最后单击的复选框的值为“hotel”，您将发送

categories=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();
                        }
                    });

            }

if（checkbox.is（'：checked'））{
$（'.loader'）.show（）；
$.ajax({
类型：“POST”，
url:window.location.pathname，
数据：“分类=”+checkboxVal，
成功：功能（响应）{
json=json.parse（响应）；
for（var i=0；i

以下是避免主要问题的更好解决方案的要点。与其在创建标记之前检查复选框的checked属性，不如中止最近的请求：

    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*/}

var checkbox=$（此项）；
var checkboxVal=$（this.val（）；
console.log（'click'）；
//如果最近有请求，请中止它
if（checkbox.data（'xhr'））{
checkbox.data（'xhr'）.abort（）；console.log（'recent request aborted'）；
}
if（checkbox.is（'：checked'））{
$（'.loader'）.show（）；
数据=数据+复选框val+'，'；
//将jqXhr存储在复选框数据中
//以便以后能够中止它
checkbox.data（'xhr'，$.ajax）({
类型：“POST”，
url:window.location.pathname，
数据：“分类=”+checkboxVal，
成功：功能（响应）{
json=json.parse（响应）；
对于（var i=0；i    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*/}