Google地图API – 删除标记
我尝试过在这里和谷歌地图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); } } 附加信息： 校园地图和完整的代码 （不包括地图API）
你需要保留一个google.maps.Marker对象的数组来隐藏（或删除或运行其他操作）。
在全球范围内：
var gmarkers = [];
然后在创build时按下该arrays上的标记：
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>
你可以试试这个
markers[markers.length-1].setMap(null);
希望它的作品。
根据谷歌的文件，他们说这是最好的办法。 首先创build这个函数来找出有多less标记/
function setMapOnAll(map1) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map1); } }
接下来创build另一个function来取走所有这些标记
function clearMarker(){ setMapOnAll(null); }
然后创build这个最后的函数，当这个函数被调用时，擦除所有的标记。
function delateMarkers(){ clearMarker() markers = [] //console.log(markers) This is just if you want to
}
希望能帮助好运
