Google maps 完全破坏gmap3上的标记

我试图让一个用户删除多达10个标记，并在单击时删除它们。我还让它在用户添加标记或拖动时，用地图上标记的坐标更新“div”。除了当用户删除一个标记时，我的一切都正常工作，当我在标记中循环时，它似乎仍然在地图上。知道我做错了什么吗

jsFiddle：

代码：

$（文档）.ready（函数（）{
var-markerCount=0；
$（“#测试1”）.gmap3({
地图：{
选项：{
中心：[-2.2214281090541204，-78.69506835975]，
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
滚轮：对，
禁用双击缩放：真，
街景控制：错误，
},
活动：{
单击：功能（映射、事件）{
如果（标记计数<10）{
$（本文件）。gmap3(
{
标记：{
latLng:event.latLng，
选项：{
真的，
动画：google.maps.animation.DROP，
},
活动：{
单击：功能（标记）{
marker.setMap（map）；
marker.setMap（空）；
标记=空；
删除标记；
控制台日志（标记器）；
马克计数--；
},
dragend：功能（标记器）{
$（“#inputArray”）.empty（）；
setTimeout（函数（）{
var markers=$（“#test1”）.gmap3({
获取：{
所有人：是的
}
});
$。每个（标记，功能（i，标记）{
$（“#inputArray”）.append（“{”纬度“：“+marker.position.lat（）+”，“+”“经度“：“+marker.position.lng（）+”，”+”）；
});
}, 400);
}
},
},
});
markerCount++；
$（“#inputArray”）.empty（）；
setTimeout（函数（）{
var markers=$（“#test1”）.gmap3({
获取：{
所有人：是的
}
});
$。每个（标记，功能（i，标记）{
$（“#inputArray”）.append（“{”纬度“：“+marker.position.lat（）+”，“+”“经度“：“+marker.position.lng（）+”，”+”）；
});
}, 400);
}
否则{
返回false；
}; 
}
}
}
});
});

这类事情在gmap3中可能不那么简单。与direct google.maps API相比，您需要稍微不同的思维方式

主要观点：

• 您需要为标记提供id、名称或标记
• 您需要使用

  clear

• 您需要明智地使用回调（gmap3方式）

下面是您的代码分解为一组函数，并应用了必要的修复

$(document).ready(function () {
    var mapOpts = {
        center: [-2.2214281090541204, -78.695068359375],
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        disableDoubleClickZoom: true,
        streetViewControl: false,
    };
    function genId() {
        return '' + (new Date()).getTime();
    }

    function addMarker(map, event) {
        if (markerCount < 10) {
            var uid = genId();
            $(this).gmap3({
                marker: {
                    latLng: event.latLng,
                    options: {
                        draggable: true,
                        animation: google.maps.Animation.DROP
                    },
                    events: {
                        click: function() {
                            clearMarker(uid);
                        },
                        dragend: listMarkers
                    },
                    id: uid
                }
            });
            markerCount++;
            listMarkers();
        } else {
            return false;
        };
    }
    function listMarkers() {
        $("#test1").gmap3({
            get: {
                all: true,
                callback: function(results) {
                    $("#inputArray").empty();
                    $.each(results, function (i, marker) {
                        $("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
                    });
                }
            }
        });
    }
    function clearMarker(uid) {
        $('#test1').gmap3({
            clear: {
                id: uid,
                callback: function() {
                    listMarkers();
                    markerCount--;
                }
            }
        });
    }

    var markerCount = 0;

    $("#test1").gmap3({
        map: {
            options: mapOpts,
            events: {
                click: addMarker
            }
        }
    });
});

$（文档）.ready（函数（）{
var mapOpts={
中心：[-2.2214281090541204，-78.69506835975]，
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
滚轮：对，
禁用双击缩放：真，
街景控制：错误，
};
函数genId（）{
返回“”+（新日期（））.getTime（）；
}
函数addMarker（映射、事件）{
如果（标记计数<10）{
var uid=genId（）；
$（本文件）。gmap3({
标记：{
latLng:event.latLng，
选项：{
真的，
动画：google.maps.animation.DROP
},
活动：{
单击：函数（）{
清除标记（uid）；
},
dragend:listMarkers
},
id:uid
}
});
markerCount++；
listMarkers（）；
}否则{
返回false；
};
}
函数listMarkers（）{
$（“#测试1”）.gmap3({
获取：{
所有人：是的，
回调：函数（结果）{
$（“#inputArray”）.empty（）；
$。每个（结果、功能（i、标记）{
$（“#inputArray”）.append（“{”纬度“：“+marker.position.lat（）+”，“+”“经度“：“+marker.position.lng（）+”，”+”）；
});
}
$(document).ready(function () {
    var mapOpts = {
        center: [-2.2214281090541204, -78.695068359375],
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        disableDoubleClickZoom: true,
        streetViewControl: false,
    };
    function genId() {
        return '' + (new Date()).getTime();
    }

    function addMarker(map, event) {
        if (markerCount < 10) {
            var uid = genId();
            $(this).gmap3({
                marker: {
                    latLng: event.latLng,
                    options: {
                        draggable: true,
                        animation: google.maps.Animation.DROP
                    },
                    events: {
                        click: function() {
                            clearMarker(uid);
                        },
                        dragend: listMarkers
                    },
                    id: uid
                }
            });
            markerCount++;
            listMarkers();
        } else {
            return false;
        };
    }
    function listMarkers() {
        $("#test1").gmap3({
            get: {
                all: true,
                callback: function(results) {
                    $("#inputArray").empty();
                    $.each(results, function (i, marker) {
                        $("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
                    });
                }
            }
        });
    }
    function clearMarker(uid) {
        $('#test1').gmap3({
            clear: {
                id: uid,
                callback: function() {
                    listMarkers();
                    markerCount--;
                }
            }
        });
    }

    var markerCount = 0;

    $("#test1").gmap3({
        map: {
            options: mapOpts,
            events: {
                click: addMarker
            }
        }
    });
});