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

时间:2011-04-13 12:53:22

标签: google-maps google-maps-api-3

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

1 个答案:

答案 0 :(得分:1)

以下是JSFiddle Demo:

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

  

完全等于(值和类型)

问题是如果你在同一个位置创建两个或多个标记,它会删除两个标记,但实际上你只删除两个“克隆”中的一个,从而使标记不可移除。这是因为使用getTitle返回lat lng,如果你有两个标记w / same lat lng你有问题。另外,我在您的onclick函数中更改了marker1this,它们指的是同一个对象以便于阅读。

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