2013-05-10 26 views
25

Próbowałem już patrzeć na wiele różnych bloków kodu tutaj i na dokumentację API Google Maps, ale wciąż nie byłem w stanie dowiedzieć się, jak ukryć znaczniki.Google Map API - usuwanie znaczników

To jest bieżący kod, którego używam i działał dla jednej instancji. Raz dodany "do" pętli w funkcji o markers.setMap (null) Firefox wyświetla następujący błąd:

błąd: TypeError: markers.setMap nie jest funkcją

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); 
    } 
} 

Dodatkowe informacje : Campus Map i full code (z wyłączeniem Map API)

+0

Co oznacza kod, który tworzy znaczniki wyglądać? Czy możesz podać jsfiddle, który wykazuje problem (lub podoba się problematyczna mapa)? – geocodezip

+1

możliwy duplikat [Google Maps API v3: jak usunąć wszystkie znaczniki?] (Http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers) – geocodezip

+0

proszę edytuj swoje pytanie z dodatkowymi informacjami. – geocodezip

Odpowiedz

66

Musisz zachować tablicę obiektów google.maps.Marker, aby ukryć (lub usunąć lub uruchomić inne operacje na nich).

w zasięgu globalnym:

var gmarkers = []; 

następnie wciśnij znaczniki na tej tablicy, jak je tworzyć:

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); 

Następnie w celu ich usunięcia:

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

working example (przełącza znaczniki)

kod snippet:

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>

+0

Po prostu myślałem, że istnieje druga opcja, możesz dodać znaczniki do tablicy lokalizacji, zamiast tworzyć oddzielną tablicę. – geocodezip

+0

Zrobiłem "i

+0

@geocodezip dzięki bardzo dużo. Drapałem się w głowę przez ostatnie 5 godzin! – user875139

0

można spróbować tej

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

Mam nadzieję, że to działa.

0

Według dokumentacji Google powiedzieli, że jest to najlepszy sposób, aby to zrobić. Najpierw utwórz tę funkcję, aby dowiedzieć się, ile markery nie są/

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

Następny utworzyć inną funkcję, aby zabrać wszystkie te znaczniki

function clearMarker(){ 
setMapOnAll(null); 
} 

Następnie utworzyć tę ostateczną funkcję, aby usunąć wszystkie znaczniki, gdy kiedykolwiek ta funkcja jest wywoływana.

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

}

Mam nadzieję, że pomogło powodzenia

Powiązane problemy