隐藏谷歌地图标记onClick事件的问题

Problems hiding google maps marker onClick event

本文关键字:事件 问题 onClick 谷歌 地图 图标 隐藏      更新时间:2023-09-26

我在地图上为特定位置放置了一些标记,我有两个按钮,一个隐藏所有标记(clearOverlays),另一个显示它们(showOverlays),但它不起作用。在我的JavaScript控制台,我得到这个错误:Cannot call method 'setMap' of undefined

这是我的代码…

// COORDENADAS
var coordenadas = [
  ['Punto 1',   19.558061,-99.296344, 4],
  ['Punto 2',  19.55886, -99.296886,  5],
  ['Punto 3',19.559103, -99.296688,  3],
  ['Punto 4',   19.560164,-99.297347, 2],
  ['Punto 5',19.560073,-99.296064, 1]
];

 var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: new google.maps.LatLng( 19.561883, -99.298287),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var ventana = new google.maps.InfoWindow();
var marcador, i;
for (i = 0; i < coordenadas.length; i++) {  
        marcador = new google.maps.Marker
        ({
          position: new google.maps.LatLng(coordenadas[i][1], coordenadas[i][2]),
          animation: google.maps.Animation.DROP,
          map: map
        });

        google.maps.event.addListener(
                marcador, 'mouseover', (function(marcador, i) {
                    return function() {
                      ventana.setContent(coordenadas[i][0]);
                      ventana.open(map, marcador);
                    }
                })(marcador, i)
        );
  }

function clearOverlays(map) {
  for (var i = 0; i < coordenadas.length; i++) {
    marcador[i].setMap(null);
  }      
  setAllMap(null);
  console.log('click Ocultar');
}
function showOverlays(map) {
  for (var i = 0; i < coordenadas.length; i++) {
    marcador[i].setMap(map);
  }      
  setAllMap(map);
  console.log('click Mostar');
}

marcador不是数组。Marcador [i]并不存在。这给出了错误信息:Cannot call method 'setMap' of undefined

你需要一个google.maps.Marker对象数组。

var gmarkers = [];
function clearOverlays(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }      
}
function showOverlays(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(map);
  }      
}  
for (i = 0; i < coordenadas.length; i++) {  
        var marcador = new google.maps.Marker
        ({
          position: new google.maps.LatLng(coordenadas[i][1], coordenadas[i][2]),
          animation: google.maps.Animation.DROP,
          map: map
        });
        gmarkers.push(marcador);
        google.maps.event.addListener(
                marcador, 'mouseover', (function(marcador, i) {
                    return function() {
                      ventana.setContent(coordenadas[i][0]);
                      ventana.open(map, marcador);
                    }
                })(marcador, i)
        );
  }
工作示例