我曾尝试在此处和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); }}
3 回答
慕村225694
TA贡献1880条经验 获得超4个赞
您需要保留一个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);
}
}
工作示例（切换标记）
代码段：
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>
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
根据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 关注
- 629 浏览
添加回答
举报
0/150
提交
取消