Google Map API - 删除标记

时间：2013-05-10 13:04:14

标签： google-maps google-maps-api-3

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

这是我正在使用的当前代码，它适用于一个实例。一旦我在带有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（不包括地图API）

4 个答案:

答案 0 :(得分：90)

您需要保留一个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（切换标记）

代码段 

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="http://maps.googleapis.com/maps/api/js"></script>
<div id="controls">
  <input type="button" value="Toggle All Markers" onClick="toggleMarkers()" />
</div>
<div id="map"></div>

答案 1 :(得分：0)

你可以试试这个

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

希望它有效。

答案 2 :(得分：0)

根据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

}

希望有助于好运

答案 3 :(得分：0)

如果有人使用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;
}
相关问题
最新问题