使用JavaScript再次点击按钮删除Google地图标记 [英] Remove Google maps markers by click button again using JavaScript

问题描述

我使用地理编码来允许用户导航到特定位置，然后将特定半径的标记添加到此导航点。如果用户再次点击该按钮并想要导航到另一个地方，则应该删除第一个请求的所有标记。我不得不说，导航点标有蓝色标记，其他标记有红色标记。我使用这段代码来完成它：

  // global 
 var previousTarget = 0; 
 var markers = new Array（）; //所有我的标记存储在这里
 //全局结束
 
 geocoder.geocode（
 {'address'：address}，
函数（结果，状态） {
 if（status == google.maps.GeocoderStatus.OK）{
 map.setCenter（results [0] .geometry.location）; 
 marker = new google.maps.Marker（ {
 map：map，
 position：results [0] .geometry.location，
 icon：'http://maps.google.com/mapfiles/ms/micons/blue.png '
}）; 
 
 var marker，i; 
 var splitted = locations.splitted（，）; 
 
 for（var i = 0; i< splitted.length; i ++）{
 geocoder.geocode（
 {'address'：splitted [i]}，
 function（results，status）{
 if（results！= null）{
 marker = new google.maps.Marker（{
 map：m ap，
 position：results [0] .geometry.location 
}）; 
 
 markers.push（marker）; 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 $ .ajax（{
 url： 'myfile.php'，
 type：'POST'，
 data：{addrData：jqXHR.responseText}，
成功：函数（datas，textStatus，jqXHR）{
 for （var l = 0; l  if（marker == markers [l]）{
 infowindow.setContent（'test'）; 
 infowindow。打开（地图，标记）; 
} 
} 
 }，
 
错误：函数（jqXHR，textStatus，errorThrown）{
 alert（Error）; 
} 
}）; 
} 
}）（marker，i））; 
} 
} 
）; 
 
 if（previousTarget> 1）{//这里是单击按钮两次的函数
 markers.setMap（null）; 
} 
} 
} 
} 
）; 
  

如果我这样做，控制台会出现错误，按两下按钮：

$ b $ 未捕获TypeError：Object [object Array]没有方法'setMap'

如果我将标记更改为标记，它只会移除蓝色标记。有人可以给我一个提示，我犯了一个错误吗？

解决方案

您需要遍历您的标记数组并删除每个标记。

$ p $ for（var i = 0; i< markers.length; i ++）{

markers [I] .setMap（空）;
}


I use geocoding to allow the user to navigate to a specific place and then add markers in a specific radius to this navigated point. If the user clicks on the button again and wants to navigate to another place it should remove all the markers of the first request. I have to say that the navigated point is marked with a blue marker and the others are marked with a red marker. I use this code to do it:

// global
var previousTarget = 0;
var markers = new Array(); // All my markers are stored here
// end global

geocoder.geocode(
    {'address': address},
    function(results, status){          
        if(status == google.maps.GeocoderStatus.OK){
            map.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
            });

            var marker, i;
            var splitted = locations.splitted(",");

            for(var i = 0; i < splitted.length; i++){
                geocoder.geocode(
                    {'address': splitted[i]},
                    function(results, status){
                        if(results != null){
                            marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });

                            markers.push(marker);
                            google.maps.event.addListener(marker, 'click', (function(marker, i){
                                return function() {
                                    $.ajax({
                                        url: 'myfile.php',
                                        type: 'POST',
                                        data: {addrData: jqXHR.responseText},
                                        success: function(datas, textStatus, jqXHR){
                                            for(var l = 0; l < markers.length; l++){
                                                if(marker == markers[l]){
                                                    infowindow.setContent('test');
                                                    infowindow.open(map, marker);
                                                }
                                            }
                                        },

                                        error: function(jqXHR, textStatus, errorThrown){
                                            alert("Error");
                                        }
                                    });
                                }
                            })(marker, i));
                        }
                    }
                );

                if(previousTarget > 1){ // Here is the function to click the button twice
                    markers.setMap(null);
                }
            }
        }
    }
);

If I do this there comes an error in the console by hitting the button twice:

Uncaught TypeError: Object [object Array] has no method 'setMap'

And if I change markers to marker it just removes the blue marker. Can someone please give me a hint where I made an error?

解决方案

You need to loop through your markers array and remove each marker.

for (var i=0; i<markers.length; i++) {

    markers[i].setMap(null);
}

这篇关于使用JavaScript再次点击按钮删除Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！