javascript - 无法删除谷歌地图标记 [英] javascript - can't remove google map markers

问题描述

我在使用Google地图标记时遇到了一些麻烦。我有一个包含7个位置的数组。加载页面时，for循环遍历数组，并将前四个位置作为标记放置在地图上。然后，我想要发生的是能够单击删除并添加标记按钮，该按钮将运行一个函数（称为addMarker2）以删除原始4个位置标记并将最后3个位置标记添加到地图。

我测试过这个函数，只添加了最后3个标记，并且工作正常。但是，当我添加代码以删除前4个标记，然后添加最后3个标记时，它不再起作用。我一直在寻找答案，几乎所有我发现的东西似乎表明我正确地做到了，尽管显然我不是。

  var mapCanvas = document.getElementById（'map-canvas'）; 
 var mapOptions = {
 center：new google.maps.LatLng（40，-95），
 zoom：4，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 
 
 //创建地图
 var map = new google.maps.Map（mapCanvas，mapOptions）; 
 
 //阵列位置
 var pins = [
 ['Cleveland'，41.499321，-81.694359]，
 ['Florence'，34.195435，-79.762566] ，
 ['诺克斯维尔'，35.960638，-83.920739]，
 ['孟菲斯'，35.149532，-90.048981]，
 ['纳什维尔'，36.162664，-86.781602]，
 ['Phoenix'，33.448376，-112.074036]，
 ['Toronto'，43.653225，-79.383186] 
]; 
 
 
 //循环遍历位置& （i = 0; i <4; i ++）{
 var position = new google.maps.LatLng（pins [i] [1]，pins [i]）将每个地图放置在地图
上。 [2]）; 
 var marker = new google.maps.Marker（{
 position：position，
 map：map，
 icon：'http://i.imgur.com/FPiUErC。 png'，
 title：pins [i] ['0'] 
}）; 
} // for循环的结尾
 
 
函数addmarker2（）{
 //删除前四个标记
 for（i = 0; i< 4; i ++）{
 pins [i] .setMap（null）; 
} 
 
 //添加最后三个标记
（i = 4; i <7; i ++）{
 var myPosition = new google.maps。 LatLng（引脚[i] [1]，引脚[i] [2]）; 
 var marker = new google.maps.Marker（{
 position：myPosition，
 map：map，
 icon：'http://i.imgur.com/FPiUErC。 png'，
 title：pins [i] [0] 
}）; 
} //循环结束
} //结束addmarker2函数
 
 $ b $（＃mysubmit）。click（addmarker2）; 
  

使用setMap（null）的方式必须有错误。 我有一个很好的代码。它一开始不会工作，但如果你注释掉for 循环尝试删除前4个标记，然后它将成功添加最后3个。我只是需要它来做到这两点。

>

我已经通过在开发者控制台上键入来进行调试，并且我找到了删除所有标记的方法。 （使用 array.push（）方法保存）

这里是代码 - 只需调用<$ c
$ b $ pre $函数neutralize（）{
for（var i = 0; i< markers.length; i ++）{
try {
markers [i] .f.setMap（null）;
}
catch {
markers [i] .setMap（null）;
}
}

markers = [];
}

I'm having some trouble with google map markers. I have an array that contains 7 locations. When the page loads, a "for" loop runs through the array and places the first four locations as markers on the map. What I then want to happen is to be able to click the "Remove and add markers" button, which would run a function (called addMarker2) to remove the original 4 location markers and add the last 3 location markers to the map.

I've tested the function to only add the last 3 markers, and it works fine. But when I add the code to remove the first 4 markers before adding the last 3 markers, it doesn't work anymore. I've been searching all over for an answer, and almost everything I've found seems to indicate that I'm doing it correctly, although clearly I'm not.

var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
  center: new google.maps.LatLng(40, -95),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

// create the map
var map = new google.maps.Map(mapCanvas, mapOptions);

// array of locations
var pins = [
         ['Cleveland',41.499321,-81.694359],
         ['Florence',34.195435,-79.762566],
         ['Knoxville',35.960638,-83.920739],
         ['Memphis',35.149532,-90.048981],
         ['Nashville',36.162664,-86.781602],
         ['Phoenix',33.448376,-112.074036],
         ['Toronto',43.653225,-79.383186]
    ];


// Loop through the array of locations & place each one on the map  
for( i = 0; i < 4; i++ ) {
    var position = new google.maps.LatLng(pins[i][1], pins[i][2]);
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: 'http://i.imgur.com/FPiUErC.png',
        title: pins[i]['0']
    });
} // end of the for loop


function addmarker2() {
    // remove the first four markers
    for( i = 0; i < 4; i++ ) {
       pins[i].setMap(null); 
    }

    // add the last three markers
    for( i = 4; i < 7; i++ ) {
        var myPosition = new google.maps.LatLng(pins[i][1], pins[i][2]);
        var marker = new google.maps.Marker({
            position: myPosition,
            map: map,
            icon: 'http://i.imgur.com/FPiUErC.png',
            title: pins[i][0]
        });
    } // end of for loop
} // end of addmarker2 function


$("#mysubmit").click(addmarker2);

Something has to be incorrect with the way I am using setMap(null). I have a jsfiddle of the code. It won't work at first, but if you comment out the "for" loop that is attempting to remove the first 4 markers, then it will successfully add the last 3. I just need it to do both.

解决方案

I've already live debugging by typing on developer console, and i've found a way to remove all markers. (which saved using array.push() method)

Here is the code -- just call neutralize():

function neutralize() {
    for (var i = 0; i < markers.length; i++) {
        try{
            markers[i].f.setMap(null);
         }
        catch{
            markers[i].setMap(null);
         }    
    }

    markers = [];
}

这篇关于javascript - 无法删除谷歌地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！