谷歌地圖API - Javascript篩選器

Question

我正在利用多邊形的應用程序中的谷歌地圖api來顯示位置。我試圖讓用戶使用select來過濾屬性，並使用過濾後的輸出更新更改後的多邊形。我的過濾器正在返回正確的數據，但未更新多邊形。我該怎麼處理這個錯誤？

過濾

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

多邊形

  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

我還沒有嘗試過，但嘗試創建onMapReady()到onConnected()，加buildGoogleApiClient（）的調用onCreate()到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)); 
} 
} 

您可以使用requestLocationUpdates()，並調用removeLocationUpdates()在第一位置進來

這裏有一個演示應用程序，它可以幫助您瞭解地圖API的工作原理：https://github.com/googlemaps/android-samples/tree/master/ApiDemos