Удаление маркера из массива в Google maps 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:

По сути, вы использовали var count для отслеживания количества маркеров.Вы можете сделать markers.length для этого.Вместо использования markers[count] вы можете использовать метод push собственного массива для добавления элемента в массив.Для удаления используйте splice(i, 1);, где i - позиция элемента и удалите 1 элемент из этой позиции.Кроме того, чтобы проверить, равны ли два маркера или «одинаковые», вместо этого, используя getTitle(), используйте ===, что:

точно равно (значение и тип)

Проблема в том, что если вы создадите два или более маркера в одной и той же позиции, это приведет к удалению обоих маркеров, но на самом деле вы удаляете только один из двух «клонов» и, таким образом, оставляете маркер несъемным.Это вызвано использованием getTitle, который возвращает значение lat lng, и если у вас есть два маркера с одним и тем же значением l 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);
    }
}