从谷歌地图 v3.0 中的数组中删除标记问题

Question

我在从数组中删除标记时遇到了这个问题。我单击地图并在单击的位置放置标记，然后将标记保存在数组中。删除它们时，它只能按照我放置它们的顺序工作，但要向后，这意味着我放置 1 2 3 但必须像 3 2 1 一样删除它们。

如果我尝试以随机顺序删除标记，则删除第一个标记，但随后其他标记停止工作，侦听器仍然有效，但似乎 forloop 没有在数组中找到其他标记。

有什么想法吗？我完全迷路了。

代码如下：

 var map;
    var tempLatLng;
    var zoomLevel;
    var markers = [];
    var zoomLevels = [];
    var count = -1;
    var nullLatlng = new google.maps.LatLng(84.52,45.16);
    var nullMarker = new google.maps.Marker({
    position: nullLatLng, 
    });

    function initialize() {
    var myLatlng = new google.maps.LatLng(55.605629745598904,13.000441789627075);
    var myOptions = {
    zoom: 17,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel:false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    //Puts a listener on the map, when clicking on the map, it places a marker.
    google.maps.event.addListener(map, 'click', function(event) {
    zoomLevel = map.getZoom();
    document.getElementById("zoom").value = zoomLevel;
    tempLatLng = event.latLng;
    setTimeout("placeMarker(tempLatLng)", 800);     //placeMarker is called with a duration so that                                                         //doubleclicking doesn't bother the placement.
    });

    }
    //Function to place markers.
    function placeMarker(location) {
    if(zoomLevel == map.getZoom()){
        if(true){
            var marker1 = new google.maps.Marker({
                position: location, 
                map: map,
                draggable:true
            });
            count = count + 1;
            markers[count] = marker1;
            document.getElementById("count").value = count;

            google.maps.event.addListener(marker1,'rightclick', function(event){
                document.getElementById("test2").value = "funkar";
                for(var i = 0 ;i < markers.length ;i++){
                    if(markers[i].getTitle() == marker1.getTitle()){
                        marker1.setMap(null);
                        document.getElementById("markerpos").value = markers[i].getTitle();
                        document.getElementById("test1").value = markers[i].getTitle();
                        count = count - 1;
                        document.getElementById("count").value = count;
                        markers[i] = nullMarker;
                    }
                }

            });

            marker1.setTitle(location.toString());

        }
        map.setCenter(location);
    }
}

Answer 1

这里是JSFiddle Demo:

基本上，您使用var count 来跟踪标记的数量。你可以这样做markers.length。您可以使用原生数组的 push 方法将元素添加到数组中，而不是使用 markers[count]。要删除使用 splice(i, 1); ，其中 i 是元素的位置并从该位置删除 1 个元素。此外，要检查两个标记是否相等或“相同”，而不是使用 getTitle() 使用 === 这样做：

完全等于（值和类型）

问题是，如果您在同一位置创建两个或多个标记，则会删除这两个标记，但实际上您只删除了两个“克隆”中的一个，从而使标记无法删除。这是由于使用 getTitle 返回 lat lng 造成的，如果您有两个带有相同 lat lng 的标记，您就会遇到问题。另外，我在你的onclick 函数中将marker1 更改为this，它们指的是同一个对象以提高可读性。

//Function to place markers.
function placeMarker(location) {
    if (zoomLevel == map.getZoom()) {
        if (true) {
            var marker1 = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
            count = count + 1;
            markers.push(marker1);
            document.getElementById("count").value = markers.length;

            google.maps.event.addListener(marker1, 'rightclick', function(event) {
                document.getElementById("test2").value = "funkar";
                for (var i = 0; i < markers.length; i++) {
                    if (markers[i] === this) {
                        this.setMap(null);
                        document.getElementById("markerpos").value = markers[i].getTitle();
                        document.getElementById("test1").value = markers[i].getTitle();
                        markers.splice(i, 1);
                        document.getElementById("count").value = markers.length;
                    }
                }

            });

            marker1.setTitle(location.toString());

        }
        map.setCenter(location);
    }
}