在Google Maps v3.0问题中从数组中删除标记

问题描述

|| 从数组中删除标记时遇到了这个问题。我单击地图，然后将标记放置在单击的位置，然后将标记保存在数组中。当删除它们时，它只能按我放置它们的顺序工作，但是向后放置，这意味着我放置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);
    }
}

    

解决方法

这是JSFiddle演示： 基本上，您是使用ѭ1来跟踪标记的数量。您可以为此做

markers.length

。可以使用本机数组的push方法将元素添加到数组中，而不是使用ѭ3。要删除，请使用

splice(i,1);

，其中i是元素的位置，并从该位置删除1个元素。另外，要检查两个标记是否相等或使用“ 5”来代替\“ same \”，请使用6来执行此操作：   完全等于（值和类型） 问题是，如果您在同一位置创建两个或多个标记，则会删除两个标记，但实际上您只删除了两个“克隆”之一，因此标记无法删除。这是由于使用

getTitle

会导致返回纬度，如果您有两个标记都带有相同纬度，则会出现问题。另外，在您的

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