Google Maps-Filterung basierend auf Marker-Attributen

Question

Ich versuche, eine Filterfunktion zu meinen bestehenden Google Maps JS hinzuzufügen, aber ich weiß nicht wirklich, wo ich anfangen soll. Der folgende Code lädt alle Kliniken und die Schaltfläche muss mit einem Objekt im Array marker.specialties übereinstimmen. Wie kann ich eine einfache Funktion hinzufügen, die alle anderen Kliniken verbirgt, während dies angezeigt wird?

function loadPlaces(map, lat = 37.78099539999999, lng = -122.47150820000002) { 
    var filters = { healthcare: false, denistry: false }; 
    // Filter trigger 
    $$("input[name=filter]").on("change", function() { 
     console.log("it runs"); 
     // let selectedFilter = this.id; 
     if (this.id === "healthcare" && filters.healthcare === false) { 
      filters.healthcare = true; 
     } else { 
      filters.healthcare = false; 
     } 

     // toggle 
     // filters.healthcare = true; 
     console.log(filters); 
     // 2. Check vars and filter by which ones are true 
     filterMarkers(filters); 
    }); 

    axios.get(`/api/clinics/near?lat=${lat}&lng=${lng}`).then(res => { 
     const places = res.data; 
     if (!places.length) { 
      alert("no places found!"); 
      return; 
     } 

     const bounds = new google.maps.LatLngBounds(); 
     const infoWindow = new google.maps.InfoWindow(); 

     const markers = places.map(place => { 
      const [placeLng, placeLat] = place.location.coordinates; 
      const position = { lat: placeLat, lng: placeLng }; 
      const marker = new google.maps.Marker({ 
       map, 
       position 
      }); 
      bounds.extend(position); 
      marker.place = place; 
      return marker; 
     }); 

     // when someone clicks ona a marker, show the details of that place 
     markers.forEach(marker => 
      marker.addListener("click", function() { 
       infoWindow.setContent(this.place.name); 
       console.log(this.place); 
       infoWindow.open(map, this); 
      }) 
     ); 

     // zoom map to fit markers perfectly 
     map.setCenter(bounds.getCenter()); 
     map.fitBounds(bounds); 
    }); 
} 

function makeMap(mapDiv) { 
    if (!mapDiv) return; 

    const map = new google.maps.Map(mapDiv, mapOptions); 
    loadPlaces(map); 

    const input = $("[name=geolocate]"); 
    const autocomplete = new google.maps.places.Autocomplete(input); 
} 

export default makeMap; 

Answer 1

Sie müssen für jeden Marker zu setMap(null) alle und setMap(map) wieder die, die Sie wollen zeigen, sich zu verstecken.

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

Answer 2

verstecken nur alle Markierungen, die Sie brauchen nicht

function filter(markers) { 
    for (var i = 0; i < markers.length; i++) { 
     if(/* conditional statement to check whether you'll going to hide this marker */) { 
      markers[i].setMap(null); 
     } 
    } 
} 

einhüllen Sie alles noch einmal zeigen wollen

function showAllMarkers(markers, map) { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(map); 
    } 
}