it-swarm.com.de

Google Map API - Entfernen von Markierungen

Ich habe versucht, eine Vielzahl von Codeblöcken hier und in der Google Maps API-Dokumentation zu betrachten, aber STILL konnte nicht herausfinden, wie Markierungen ausgeblendet werden.

Dies ist der aktuelle Code, den ich verwende, und er hat für eine Instanz funktioniert. Nachdem ich die "for" -Schleife in der Funktion mit markers.setMap (null) hinzugefügt habe, zeigt Firefox den folgenden Fehler an:

Fehler : TypeError: markers.setMap ist keine Funktion

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

Zusätzliche Informationen: Campus Map und vollständiger Code (ohne Map API)

36
Greg McMullen

Sie müssen ein Array von google.maps.Marker Objekte, die ausgeblendet werden sollen (oder die entfernt oder andere Vorgänge ausgeführt werden sollen).

Im globalen Bereich:

var gmarkers = [];

Verschieben Sie dann die Marker auf diesem Array, während Sie sie erstellen:

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

Dann entfernen Sie sie:

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

Arbeitsbeispiel (schaltet die Marker um)

Code-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>
91
geocodezip

Laut Google-Dokumentation ist dies der beste Weg, dies zu tun. Erstelle zuerst diese Funktion, um herauszufinden, wie viele Marker es gibt /

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

Erstellen Sie als Nächstes eine weitere Funktion, um alle diese Markierungen zu entfernen

 function clearMarker(){
setMapOnAll(null);
}

Erstellen Sie dann diese letzte Funktion, um alle Markierungen zu löschen, wann immer diese Funktion aufgerufen wird.

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

}

Hoffe das hat viel Glück gebracht

0
Akhil

Sie können dies versuchen

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

Hoffe, es funktioniert.

0
Abhilasha