【问题标题】:Google Maps Cannot Remove Marker谷歌地图无法删除标记
【发布时间】:2014-07-12 20:51:22
【问题描述】:

我在删除谷歌地图上的标记时遇到了问题。每次用户创建航点时都会创建这些标记。它们与航路点的位置相同。这些标记还有一个带有按钮的信息框,用于删除正确的航点和标记。

每次创建航路点时,我都会将标记推送到一个阵列,并将信息框推送到另一个阵列。

如果我只有一个航路点,这很有效。标记和航路点被删除。但是一旦我有 2 个或更多,它就不再起作用了。一旦我尝试删除其中一个航点,标记就会留在地图上,即使我调用了 .setMap(null) 和/或 .setPosition(null)。每次我删除一个标记时,我也会从相应的数组中删除它,航点和信息框。奇怪的是,当我调用一个函数来重绘路径时,路点不再存在(按计划),但标记仍然存在。

代码如下:

 var markers = {        
    waypoints:{            
        p:[],
        i:[],
        m:[]
    }
};
var saveWaypoints = function(){
        removeWaypoints();

        var points = directionsRenderer.getDirections().routes[0].legs[0].via_waypoints;        

        for(var i=0;i<points.length;i++){
            var marker = new google.maps.Marker({
                map:map,
                position:points[i],
                icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
                id: i
            });

            var infobox = new InfoBox({
                id: i,
                position: points[i],
                disableAutoPan: true,
                boxStyle: {
                    background: "white",
                    opacity: 1,
                    width: "289px",
                    border: 0,
                    padding: 0
                },
                zIndex: 1E4,
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false,
                content: 'Pozicija: ' + points[i]               
            });            

            infobox.open(map,marker);
            infobox.hide();

            google.maps.event.addListener(infobox,'closeclick',function(){
                markers.waypoints.m[this.id_].setMap(null);
                markers.waypoints.m[this.id_].setPosition(null);

                markers.waypoints.m.splice(this.id_,1);
                markers.waypoints.p.splice(this.id_,1);
                markers.waypoints.i.splice(this.id_,1);

                drawPath();
            });

            google.maps.event.addListener(marker,'mouseover',function(){
                markers.waypoints.i[this.id].show();
            });

            google.maps.event.addListener(marker,'mouseout',function(){
                if(markers.waypoints.i[this.id] !== undefined){
                    if(!markers.waypoints.i[this.id].keepOpen()){
                      markers.waypoints.i[this.id].hide();  
                    }
                }
            });

            google.maps.event.addListener(marker,'click',function(){
                if(waypointDialog !== null){
                    waypointDialog.doNotClose(false);
                    waypointDialog.hide();
                }

                console.log(this.id);

                waypointDialog = markers.waypoints.i[this.id];
                waypointDialog.doNotClose(true);
            });

            markers.waypoints.m.push(marker);
            markers.waypoints.i.push(infobox);
            markers.waypoints.p.push({
                location: points[i],
                stopover: false
            });
        };            
    }; 

    var removeWaypoints = function(){
        if(markers.waypoints !== (null||undefined)){
            markers.waypoints.p = [];
            markers.waypoints.m = [];
            markers.waypoints.i = [];          
        }      
    };    

【问题讨论】:

  • 清除数组不会从地图中删除标记,您必须遍历markers.waypoints.m并将每个标记的map-property设置为null
  • 我做了,可惜没解决问题。
  • 要从地图中删除标记,您需要将地图属性设置为空。使用 google.maps.Marker 中的 setMap 方法进行设置
  • 我做了,但标记留在地图上。

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


【解决方案1】:

我认为这是因为每次循环时,它都会创建一个标记,这就是您无法访问前一个标记的原因,在您的代码中,我认为只能访问最后创建的标记,以访问您应该放置的所有标记声明后在数组中。试试这个代码

var markers=[]; //initialize it on global

//and on creating marker, inside for loop add this code.
markers.push(marker);


//and to clear the markers in map try the code below
for(var i=0; i< markers.length; i++)
{
  markers[i].setMap(null);
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-09-29
    • 2012-10-17
    • 2021-08-05
    • 2018-10-13
    • 1970-01-01
    • 2017-02-10
    • 2014-05-01
    相关资源
    最近更新 更多