Google Maps API - Javascript Filter

Question

Ich verwende die Google Maps API in einer Anwendung mit Polygonen, um Standorte zu visualisieren. Ich versuche, dem Benutzer zu ermöglichen, ein Attribut zu filtern, indem er die Polygone bei Änderung mit der gefilterten Ausgabe auswählt und aktualisiert. Mein Filter gibt die korrekten Daten zurück, aktualisiert die Polygone jedoch nicht. Mache ich das falsch?

Filter

   $('#species_select').change(function(){ 
       $.get(
       '/species_filter', 
       $('#species_select').val(), 
       function(data){ 
        console.log(data); 
        infoWindow.close(); 
        // map.fitBounds(bounds); 
       } 
      ); 
      }); 

Polygonen

  var map; 
      var infoWindow; 

      // Map Display options 
      function initMap() { 
       map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 9, 
       center: {lat: 42.05, lng: -70.25}, 
       mapTypeId: google.maps.MapTypeId.SATELLITE 
       }); 



      // Define the LatLng coordinates for the polygon. 

      var cc_peaked_hill = [ 
       {lat: 42.049803, lng: -69.970551}, 
       {lat: 42.048273, lng: -69.978790}, 
       {lat: 42.043684, lng: -70.046082}, 
       {lat: 42.043684, lng: -70.058441}, 
       {lat: 42.056940, lng: -70.085907}, 
       {lat: 42.070194, lng: -70.118179}, 
       {lat: 42.079369, lng: -70.156631}, 
       {lat: 42.082426, lng: -70.177231}, 
       {lat: 42.082936, lng: -70.195084}, 
       {lat: 42.084974, lng: -70.210190}, 
       {lat: 42.089561, lng: -70.210190}, 
       {lat: 42.098732, lng: -70.210190}, 
       {lat: 42.107902, lng: -70.212250}, 
       {lat: 42.114524, lng: -70.215683}, 
       {lat: 42.115033, lng: -70.188217}, 
       {lat: 42.115033, lng: -70.162811}, 
       {lat: 42.110958, lng: -70.127792}, 
       {lat: 42.103827, lng: -70.090714}, 
       {lat: 42.088541, lng: -70.046768}, 
       {lat: 42.074782, lng: -70.011749}, 
       {lat: 42.049803, lng: -69.970551} 
       ] 
      ; 

      // Construct the polygon. 
      var cc_peaked_hill_billsPollygon = new google.maps.Polygon({ 
       paths: cc_peaked_hill, 
       strokeColor: '#F7F8FF', 
       strokeOpacity: 0.8, 
       strokeWeight: 1, 
       fillColor: '#4562A8', 
       fillOpacity: 0.45, 
       editable: false, 
       map: map 
      }); 

      // Add a listener for the click event. 
      cc_peaked_hill_billsPollygon.addListener('click', 

      // Set info window content to location report 
      function (event) { 
       console.log(location_reports); 
       var location_reports = cc_peaked_hill; 

       var contentString = 
       '<table>\n 
         <thead>\n 
         <tr> \n  
         <th>Date<\/th>\n  
         <th>Target Species<\/th>\n  
         <th>Vessel Name<\/th>\n  
         <th>Primary Method<\/th>\n  
         <th>Catch Total<\/th>\n  
         <th>Trip Summary<\/th>\n  
         <\/tr>\n 
         <\/thead>\n\n 
         <tbody>\n 
         <b>CC - Peaked Hill<\/b> 
         <br>\n Peaked Hill Bar <br> <br>\n  
         <tr>\n  <td>2016-05-29<\/td> \n  
         <td>Tuna<\/td>\n  
         <td>Endurance<\/td>\n  
         <td>live bait<\/td>\n  
         <td>1<\/td>\n  
         <td>Good bite on outgoing<\/td>\n  
         <\/tr>\n  
         <tr>\n  
         <td>2016-06-01<\/td> \n  
         <td>Tuna<\/td>\n  
         <td>Tradition<\/td>\n  
         <td>Live Bait<\/td>\n  
         <td>1<\/td>\n  
         <td>Kite bite live mack<\/td>\n 
         <\/tr>\n <tr>\n  
         <td>2016-06-07<\/td> \n  
         <td>Bluefish<\/td>\n  
         <td>Obsession<\/td>\n  
         <td>Live Bait<\/td>\n  
         <td>1<\/td>\n  
         <td>Top water bite at daybreak<\/td>\n 
         <\/tr>\n 
         <\/tbody>\n 
         <\/table>';    

       // Replace the info window's content and position. 
       infoWindow.setContent(contentString); 
       infoWindow.setPosition(event.latLng); 
       infoWindow.open(map); 
       } 
      ); 

HTML

  <form id="species_form" action="/species_filter" > 
       <select name="species" class="form-control m-b" id="species_select"> 
        <option value="Tuna">Tuna</option> 
        <option value="Haddock">Haddock</option> 
        <option value="Bass">Bass</option> 
        <option value="Flounder">Flounder</option> 
        <option value="Bluefish">Bluefish</option> 
        <option value="Striped Bass">Striped Bass</option> 
        <option value="Cod & Haddock">Cod</option> 
       </select> 
      </form> 

Answer 1

Ich habe es nicht ausprobiert, aber versuchen onMapReady()-onConnected() zu erstellen, fügen buildGoogleApiClient() Aufruf von onCreate() zu onMapReady()

@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_map); 
//buildGoogleApiClient(); 

// Obtain the SupportMapFragment and get notified when the map is ready to be used. 
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() 
.findFragmentById(R.id.map); 
mapFragment.getMapAsync(this); 

} 


@Override 
public void onMapReady(GoogleMap googleMap) { 
mMap = googleMap; 

mMap.setMyLocationEnabled(true); 

//add this here: 
buildGoogleApiClient(); 

//LatLng loc = new LatLng(lat, lng); 

//mMap.moveCamera(CameraUpdateFactory.newLatLng(loc)); 
} 

@Override 
public void onConnected(Bundle bundle) { 
mLastLocation = LocationServices.FusedLocationApi.getLastLocation(
mGoogleApiClient); 
if (mLastLocation != null) { 
lat = mLastLocation.getLatitude(); 
lng = mLastLocation.getLongitude(); 
mMap.moveCamera(CameraUpdateFactory.newLatLng(loc)); 
} 
} 

Sie können requestLocationUpdates(), verwenden und removeLocationUpdates() rufen, wenn der erste Standort in kommt

Hier ist eine Demo-Anwendung, die Ihnen helfen können zu verstehen, wie Google Maps-API funktioniert:. https://github.com/googlemaps/android-samples/tree/master/ApiDemos