Google Map API - 移除标记

Posted 2023-02-23

【中文标题】Google Map API - 移除标记

【英文标题】：Google Map API - Removing Markers

【发布时间】：2013-05-05 04:17:28

【问题描述】：

我已尝试查看此处和 Google Maps API 文档中的各种代码块，但仍然无法弄清楚如何隐藏标记。

这是我正在使用的当前代码，它适用于一个实例。一旦我使用markers.setMap(null) 在函数中添加了“for”循环，Firefox 就会显示以下错误：

错误：TypeError：markers.setMap 不是函数

function removeMarkers()
    var markers;
    alert(markers);
    alert(locations.length);
    for (i = 0; i<locations.length; i++)
        markers = locations[i];
        alert(markers.title);
        markers.setMap(null);
    

附加信息：Campus Map 和 full code（不包括 Map API）

【问题讨论】：

Google Maps API v3: How to remove all markers?的可能重复

【参考方案1】：

您需要保留 google.maps.Marker 对象的数组以隐藏（或删除或对其运行其他操作）。

在全局范围内：

var gmarkers = [];

然后在创建它们时将标记推送到该数组上：

var marker = new google.maps.Marker(
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
    title: locations[i].title,
    icon: icon,
    map:map
);

// Push your newly created marker into the array:
gmarkers.push(marker);

然后删除它们：

function removeMarkers()
    for(i=0; i<gmarkers.length; i++)
        gmarkers[i].setMap(null);
    

working example（切换标记）

代码 sn-p：

var gmarkers = [];
var RoseHulman = new google.maps.LatLng(39.483558, -87.324593);
var styles = [
  stylers: [
    hue: "black"
  , 
    saturation: -90
  ]
, 
  featureType: "road",
  elementType: "geometry",
  stylers: [
    lightness: 100
  , 
    visibility: "simplified"
  ]
, 
  featureType: "road",
  elementType: "labels",
  stylers: [
    visibility: "on"
  ]
];

var styledMap = new google.maps.StyledMapType(styles, 
  name: "Campus"
);
var mapOptions = 
  center: RoseHulman,
  zoom: 15,
  mapTypeControl: true,
  zoomControl: true,
  zoomControlOptions: 
    style: google.maps.ZoomControlStyle.SMALL
  ,
  mapTypeControlOptions: 
    mapTypeIds: ['map_style', google.maps.MapTypeId.HYBRID],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  ,
  scrollwheel: false,
  streetViewControl: true,

;

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

var infowindow = new google.maps.InfoWindow(
  maxWidth: 300,
  infoBoxClearance: new google.maps.Size(1, 1),
  disableAutoPan: false
);

var marker, i, icon, image;

var locations = [
  "id": "1",
  "category": "6",
  "campus_location": "F2",
  "title": "Alpha Tau Omega Fraternity",
  "description": "<p>Alpha Tau Omega house</p>",
  "longitude": "-87.321133",
  "latitude": "39.484092"
, 
  "id": "2",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment Commons",
  "description": "<p>The commons area of the apartment-style residential complex</p>",
  "longitude": "-87.329282",
  "latitude": "39.483599"
, 
  "id": "3",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment East",
  "description": "<p>Apartment East</p>",
  "longitude": "-87.328809",
  "latitude": "39.483748"
, 
  "id": "4",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment West",
  "description": "<p>Apartment West</p>",
  "longitude": "-87.329732",
  "latitude": "39.483429"
, 
  "id": "5",
  "category": "6",
  "campus_location": "C2",
  "title": "Baur-Sames-Bogart (BSB) Hall",
  "description": "<p>Baur-Sames-Bogart Hall</p>",
  "longitude": "-87.325714",
  "latitude": "39.482382"
, 
  "id": "6",
  "category": "6",
  "campus_location": "D3",
  "title": "Blumberg Hall",
  "description": "<p>Blumberg Hall</p>",
  "longitude": "-87.328321",
  "latitude": "39.483388"
, 
  "id": "7",
  "category": "1",
  "campus_location": "E1",
  "title": "The Branam Innovation Center",
  "description": "<p>The Branam Innovation Center</p>",
  "longitude": "-87.322614",
  "latitude": "39.48494"
, 
  "id": "8",
  "category": "6",
  "campus_location": "G3",
  "title": "Chi Omega Sorority",
  "description": "<p>Chi Omega house</p>",
  "longitude": "-87.319905",
  "latitude": "39.482071"
, 
  "id": "9",
  "category": "3",
  "campus_location": "D1",
  "title": "Cook Stadium/Phil Brown Field",
  "description": "<p>Cook Stadium at Phil Brown Field</p>",
  "longitude": "-87.325258",
  "latitude": "39.485007"
, 
  "id": "10",
  "category": "1",
  "campus_location": "D2",
  "title": "Crapo Hall",
  "description": "<p>Crapo Hall</p>",
  "longitude": "-87.324368",
  "latitude": "39.483709"
, 
  "id": "11",
  "category": "6",
  "campus_location": "G3",
  "title": "Delta Delta Delta Sorority",
  "description": "<p>Delta Delta Delta</p>",
  "longitude": "-87.317477",
  "latitude": "39.482951"
, 
  "id": "12",
  "category": "6",
  "campus_location": "D2",
  "title": "Deming Hall",
  "description": "<p>Deming Hall</p>",
  "longitude": "-87.325822",
  "latitude": "39.483421"
, 
  "id": "13",
  "category": "5",
  "campus_location": "F1",
  "title": "Facilities Operations",
  "description": "<p>Facilities Operations</p>",
  "longitude": "-87.321782",
  "latitude": "39.484916"
, 
  "id": "14",
  "category": "2",
  "campus_location": "E3",
  "title": "Flame of the Millennium",
  "description": "<p>Flame of Millennium sculpture</p>",
  "longitude": "-87.323306",
  "latitude": "39.481978"
, 
  "id": "15",
  "category": "5",
  "campus_location": "E2",
  "title": "Hadley Hall",
  "description": "<p>Hadley Hall</p>",
  "longitude": "-87.324046",
  "latitude": "39.482887"
, 
  "id": "16",
  "category": "2",
  "campus_location": "F2",
  "title": "Hatfield Hall",
  "description": "<p>Hatfield Hall</p>",
  "longitude": "-87.322340",
  "latitude": "39.482146"
, 
  "id": "17",
  "category": "6",
  "campus_location": "C2",
  "title": "Hulman Memorial Union",
  "description": "<p>Hulman Memorial Union</p>",
  "longitude": "-87.32698",
  "latitude": "39.483574"
, 
  "id": "18",
  "category": "1",
  "campus_location": "E2",
  "title": "John T. Myers Center for Technological Research with Industry",
  "description": "<p>John T. Myers Center for Technological Research With Industry</p>",
  "longitude": "-87.322984",
  "latitude": "39.484063"
, 
  "id": "19",
  "category": "6",
  "campus_location": "A2",
  "title": "Lakeside Hall",
  "description": "<p></p>",
  "longitude": "-87.330612",
  "latitude": "39.482804"
, 
  "id": "20",
  "category": "6",
  "campus_location": "F2",
  "title": "Lambda Chi Alpha Fraternity",
  "description": "<p>Lambda Chi Alpha</p>",
  "longitude": "-87.320999",
  "latitude": "39.48305"
, 
  "id": "21",
  "category": "1",
  "campus_location": "D2",
  "title": "Logan Library",
  "description": "<p>Logan Library</p>",
  "longitude": "-87.324851",
  "latitude": "39.483408"
, 
  "id": "22",
  "category": "6",
  "campus_location": "C2",
  "title": "Mees Hall",
  "description": "<p>Mees Hall</p>",
  "longitude": "-87.32778",
  "latitude": "39.483533"
, 
  "id": "23",
  "category": "1",
  "campus_location": "E2",
  "title": "Moench Hall",
  "description": "<p>Moench Hall</p>",
  "longitude": "-87.323695",
  "latitude": "39.483471"
, 
  "id": "24",
  "category": "1",
  "campus_location": "G4",
  "title": "Oakley Observatory",
  "description": "<p>Oakley Observatory</p>",
  "longitude": "-87.31616",
  "latitude": "39.483789"
, 
  "id": "25",
  "category": "1",
  "campus_location": "D2",
  "title": "Olin Hall and Olin Advanced Learning Center",
  "description": "<p>Olin Hall</p>",
  "longitude": "-87.324550",
  "latitude": "39.482796"
, 
  "id": "26",
  "category": "6",
  "campus_location": "C3",
  "title": "Percopo Hall",
  "description": "<p>Percopo Hall</p>",
  "longitude": "-87.328182",
  "latitude": "39.482121"
, 
  "id": "27",
  "category": "6",
  "campus_location": "G3",
  "title": "Public Safety Office",
  "description": "<p>The Office of Public Safety</p>",
  "longitude": "-87.320377",
  "latitude": "39.48191"
, 
  "id": "28",
  "category": "1",
  "campus_location": "E2",
  "title": "Rotz Mechanical Engineering Lab",
  "description": "<p>Rotz Lab</p>",
  "longitude": "-87.323247",
  "latitude": "39.483711"
, 
  "id": "28",
  "category": "6",
  "campus_location": "C2",
  "title": "Scharpenberg Hall",
  "description": "<p>Scharpenberg Hall</p>",
  "longitude": "-87.328139",
  "latitude": "39.483582"
, 
  "id": "29",
  "category": "6",
  "campus_location": "G2",
  "title": "Sigma Nu Fraternity",
  "description": "<p>The Sigma Nu house</p>",
  "longitude": "-87.31999",
  "latitude": "39.48374"
, 
  "id": "30",
  "category": "6",
  "campus_location": "E4",
  "title": "South Campus / Rose-Hulman Ventures",
  "description": "<p></p>",
  "longitude": "-87.330623",
  "latitude": "39.417646"
, 
  "id": "31",
  "category": "6",
  "campus_location": "C3",
  "title": "Speed Hall",
  "description": "<p>Speed Hall</p>",
  "longitude": "-87.326632",
  "latitude": "39.482121"
, 
  "id": "32",
  "category": "3",
  "campus_location": "C1",
  "title": "Sports and Recreation Center",
  "description": "<p></p>",
  "longitude": "-87.3272",
  "latitude": "39.484874"
, 
  "id": "33",
  "category": "6",
  "campus_location": "F2",
  "title": "Triangle Fraternity",
  "description": "<p>Triangle fraternity</p>",
  "longitude": "-87.32113",
  "latitude": "39.483659"
, 
  "id": "34",
  "category": "6",
  "campus_location": "B3",
  "title": "White Chapel",
  "description": "<p>The White Chapel</p>",
  "longitude": "-87.329367",
  "latitude": "39.482481"
, 
  "id": "35",
  "category": "6",
  "campus_location": "F2",
  "title": "Women's Fraternity Housing",
  "description": "",
  "image": "",
  "longitude": "-87.320753",
  "latitude": "39.482401"
, 
  "id": "36",
  "category": "3",
  "campus_location": "E1",
  "title": "Intramural Fields",
  "description": "<p></p>",
  "longitude": "-87.321267",
  "latitude": "39.485934"
, 
  "id": "37",
  "category": "3",
  "campus_location": "A3",
  "title": "James Rendel Soccer Field",
  "description": "<p></p>",
  "longitude": "-87.332135",
  "latitude": "39.480933"
, 
  "id": "38",
  "category": "3",
  "campus_location": "B2",
  "title": "Art Nehf Field",
  "description": "<p>Art Nehf Field</p>",
  "longitude": "-87.330923",
  "latitude": "39.48022"
, 
  "id": "39",
  "category": "3",
  "campus_location": "B2",
  "title": "Women's Softball Field",
  "description": "<p></p>",
  "longitude": "-87.329904",
  "latitude": "39.480278"
, 
  "id": "40",
  "category": "3",
  "campus_location": "D1",
  "title": "Joy Hulbert Tennis Courts",
  "description": "<p>The Joy Hulbert Outdoor Tennis Courts</p>",
  "longitude": "-87.323767",
  "latitude": "39.485595"
, 
  "id": "41",
  "category": "6",
  "campus_location": "B2",
  "title": "Speed Lake",
  "description": "",
  "image": "",
  "longitude": "-87.328134",
  "latitude": "39.482779"
, 
  "id": "42",
  "category": "5",
  "campus_location": "F1",
  "title": "Recycling Center",
  "description": "",
  "image": "",
  "longitude": "-87.320098",
  "latitude": "39.484593"
, 
  "id": "43",
  "category": "1",
  "campus_location": "F3",
  "title": "Army ROTC",
  "description": "",
  "image": "",
  "longitude": "-87.321342",
  "latitude": "39.481992"
, 
  "id": "44",
  "category": "2",
  "campus_location": "  ",
  "title": "Self Made Man",
  "description": "",
  "image": "",
  "longitude": "-87.326272",
  "latitude": "39.484481"
, 
  "id": "P1",
  "category": "4",
  "title": "Percopo Parking",
  "description": "",
  "image": "",
  "longitude": "-87.328756",
  "latitude": "39.481587"
, 
  "id": "P2",
  "category": "4",
  "title": "Speed Parking",
  "description": "",
  "image": "",
  "longitude": "-87.327361",
  "latitude": "39.481694"
, 
  "id": "P3",
  "category": "4",
  "title": "Main Parking",
  "description": "",
  "image": "",
  "longitude": "-87.326245",
  "latitude": "39.481446"
, 
  "id": "P4",
  "category": "4",
  "title": "Lakeside Parking",
  "description": "",
  "image": "",
  "longitude": "-87.330848",
  "latitude": "39.483284"
, 
  "id": "P5",
  "category": "4",
  "title": "Hatfield Hall Parking",
  "description": "",
  "image": "",
  "longitude": "-87.321417",
  "latitude": "39.482398"
, 
  "id": "P6",
  "category": "4",
  "title": "Women's Fraternity Parking",
  "description": "",
  "image": "",
  "longitude": "-87.320977",
  "latitude": "39.482315"
, 
  "id": "P7",
  "category": "4",
  "title": "Myers and Facilities Parking",
  "description": "",
  "image": "",
  "longitude": "-87.322243",
  "latitude": "39.48417"
, 
  "id": "P8",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.323241",
  "latitude": "39.484758"
, 
  "id": "P9",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.323617",
  "latitude": "39.484311"
, 
  "id": "P10",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.325714",
  "latitude": "39.484584"
, 
  "id": "P11",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.32778",
  "latitude": "39.484145"
, 
  "id": "P12",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.329035",
  "latitude": "39.4848"
];

for (i = 0; i < locations.length; i++) 

  var marker = new google.maps.Marker(
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
    title: locations[i].title,
    map: map
  );
  gmarkers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) 
    return function() 
      if (locations[i].description !== "" || locations[i].title !== "") 
        infowindow.setContent('<div class="content" id="content-' + locations[i].id +
          '" style="max-height:300px; font-size:12px;"><h3>' + locations[i].title + '</h3>' +
          '<hr class="grey" />' +
          hasImage(locations[i]) +
          locations[i].description) + '</div>';
        infowindow.open(map, marker);
      
    
  )(marker, i));


function toggleMarkers() 
  for (i = 0; i < gmarkers.length; i++) 
    if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
    else gmarkers[i].setMap(map);
  


function hasImage(location) 
  return '';

html,
body,
#map 
  height: 100%;
  width: 100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="controls">
  <input type="button" value="Toggle All Markers" onClick="toggleMarkers()" />
</div>
<div id="map"></div>

【讨论】：

我做了i<gmarkers.length-1 以保留地图上的最后一个标记。

为防止地图上的标记闪烁，请在使用 .setMap(map) 之前使用 .getMap() 检查现有地图。

【参考方案2】：

你可以试试这个

    markers[markers.length-1].setMap(null);

希望它有效。

【参考方案3】：

根据 Google 文档，他们说这是最好的方法。 首先创建这个函数来找出有多少个标记/

   function setMapOnAll(map1) 
    for (var i = 0; i < markers.length; i++) 
      markers[i].setMap(map1);
    
  

接下来创建另一个函数来删除所有这些标记

 function clearMarker()
setMapOnAll(null);

然后创建这个最终函数以在调用此函数时擦除所有标记。

 function delateMarkers()
clearMarker()
markers = []
//console.log(markers) This is just if you want to

希望对你有帮助

【参考方案4】：

如果有人使用 React 并且拥有不同的 Marker 组件并希望从地图中删除标记，则以下代码可能会很有用。

export default function useGoogleMapMarker(props) 
  const [marker, setMarker] = useState();

  useEffect(() => 
    // ...code
    const marker = new maps.Marker( position, map, title, icon );
    // ...code
    setMarker(marker);
    return () => marker.setMap(null); // to remove markers when unmounts
  , []);

  return marker;