Mapy google, tabele i znaczniki fuzji

Question

Przeszukałem wszędzie w dokumentacji, aby wyjaśnić, w jaki sposób mogę wyświetlać tylko znaczniki dla danego obszaru tabeli fuzji.

W tej chwili wszystkie znaczniki pojawiają się na mapie tak:

Fusion Table Google Maps

JSFiddle (note jsfiddle wont load the uri from website so markers wont show)

Jeśli klikniesz na powierzchni stołu fuzja/google map otrzymuję nazwa obszaru w wyskakującym okienku zgodnie z oczekiwaniami, jednak nie chcę początkowo pokazywać żadnego ze znaczników. Po kliknięciu obszaru tabeli/mapy fuzyjnej chcę, aby wyświetlała tylko znaczniki dla danego obszaru, a nie całej mapy.

ten sposób dodać znaczniki na mapie z mojego Web API:

  var uri = 'http://mountainsandweather.azurewebsites.net/api/Mountains'; 

      $(document).ready(function() { 
       //Get web api json data 
       $.getJSON(uri) 
        .done(function (data) { 
         // On success, 'data' contains a list of mountains. 
         $.each(data, function (key, item) { 
          // Add a list item for the mountain. 
          $('<li>', { text: formatItem(item) }).appendTo($('#mountains')); 

          //Put seperate data fields into one variable 
          var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 

          //Add info window to each marker 
          var infowindow = new google.maps.InfoWindow({ 
           content: formatItemInfoWindow(item) 
          }); 


          // Creating a marker and putting it on the map 
          var marker = new google.maps.Marker({ 
           position: latLng, 
           title: formatItemInfoWindow(item.Name), 
           infowindow: infowindow 
          }); 
          marker.setMap(map); 
          google.maps.event.addListener(marker, 'click', function() { 
           //this.infowindow.close(); //not working correctly info windows still show 
           this.infowindow.open(map, marker); 

          });  
         }); 
        }); 
      }); 
      function formatItemInfoWindow(item) { 
       return item.Name + '<br />' + item.Height_ft + '<br />' + item.humidity + '<br />' + item.snowCover + '<br />' + item.temperature; 
      } 
      function formatItem(item) { 
       return item.Latitude +', '+ item.Longitude; 
      } 
     } 

ja widziałem w dokumentacji oświadczenie where, który można dodać do tabel fuzyjnych. Tak:

var layer = new google.maps.FusionTablesLayer({ 
        query: { 
         select: 'geometry', 
         from: '11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3' 
         where: //not sure if I could use this or what to put. 
        }, 

Jednak dane z API Web nie jest podzielony na poszczególnych obszarach jest to po prostu jedna długa lista długości i szerokości geograficzne. Podobnie jak:

<Mountain> 
<Height_ft>2999</Height_ft> 
<Height_m>914</Height_m> 
<ID>c1</ID> 
<Latitude>57.588007</Latitude> 
<Longitude>-5.5233564</Longitude> 
<Name>Beinn Dearg</Name> 
<humidity>0.81</humidity> 
<snowCover>4.99</snowCover> 
<temperature>63</temperature> 
</Mountain> 

Czy Google ma coś na kształt mieszania geometrii stołu ze współrzędnymi? Prosty sposób wyświetlania wszystkich znaczników dla danego obszaru? Czy ktoś może pomyśleć o sposobie, w jaki można to zrobić?

Kilka dodatkowych szczegółów na temat WebAPI okrywać jest to potrzebne:

private MountainContext db = new MountainContext(); 

    // GET: api/Mountains 
    public IQueryable<Mountain> GetMountains() 
    { 
     return db.Mountains; 
    } 

    // GET: api/Mountains/5 
    [ResponseType(typeof(Mountain))] 
    public IHttpActionResult GetMountain(string id) 
    { 
     Mountain mountain = db.Mountains.Find(id); 
     if (mountain == null) 
     { 
      return NotFound(); 
     } 

     return Ok(mountain); 
    } 
    public IQueryable<Mountain> GetMountainByName(string name) 
    { 

     return db.Mountains.Where(n => string.Equals(n.Name, name)); 
    } 

Answer 1

Niestety nie ma funkcji containsLocation w FusionTablesLayer.

Jednym z rozwiązań jest utworzenie Google Maps Polygon z FusionTablesLayer, dzięki czemu możemy użyć containsLocation, aby określić, czy dodać znacznik do mapy.

Najpierw potrzebujemy współrzędnych, aby utworzyć wielokąt. Możemy użyć google.visualization.Query chwycić współrzędne wybranego obszaru z tabeli fuzyjne:

function getMountainPolygonFromFusionTable(label) { 
    // Return a new promise. 
    return new Promise(function(resolve, reject) { 

    var sql = encodeURIComponent("SELECT 'geometry' FROM 11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3 WHERE label ='" + label + "'"); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql); 

    query.send(function (response) { 
     var data = response.getDataTable().getValue(0, 0); 
     // Create a XML parser 
     if (window.DOMParser) { 
      var parser = new DOMParser(); 
      var kml = parser.parseFromString(data, "text/xml"); 
     } else { 
      var kml = new ActiveXObject("Microsoft.XMLDOM"); 
      kml.loadXML(data); 
     } 

     // Get the coordinates of Mountain Areas 
     var latLngs = kml.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue.split(' '); 

     var mountainPolygonLatLngs = []; 
     for (var i = 0; i < latLngs.length; i++) { 
      var latLng = latLngs[i].split(','); 
      mountainPolygonLatLngs.push(new google.maps.LatLng(latLng[1], latLng[0])); 
     } 

     // Create the polygon 
     mountainPolygons = new google.maps.Polygon({ 
      paths: mountainPolygonLatLngs, 
      fillColor: 'transparent', 
      strokeColor : 'transparent' 
     }); 

     resolve(mountainPolygons); 

    }); 

    }); 
} 

Wtedy właśnie pętlą przez tablicę gór i sprawdzić, czy wybrany obszar zawiera góry:

// On mountain area click 
google.maps.event.addListener(layer, 'click', function(event) { 

    // Clear all markers 
    while(markers.length) { 
     markers.pop().setMap(null); 
    } 

    // Get Polygon from FustionTable 
    getMountainPolygonFromFusionTable(event.row.label.value).then(function(mountainPolygons) { 

    // Loop through the mountains 
    for(var i = 0; i < mountains.length; i++) { 

     // Get the mountain LatLng 
     var mountain = mountains[i]; 
     var mountainLat = mountain.getElementsByTagName("Latitude")[0].childNodes[0].nodeValue; 
     var mountainLng = mountain.getElementsByTagName("Longitude")[0].childNodes[0].nodeValue; 
     var mountainLatLng = new google.maps.LatLng(mountainLat, mountainLng); 

     // If mountain is in the selected polygon, create a marker for it. 
     if (google.maps.geometry.poly.containsLocation(mountainLatLng, mountainPolygons)) { 

      // @todo set infowindow, title... 
      var marker = new google.maps.Marker({ 
       position: mountainLatLng, 
       title: 'Marker info here', 
      }); 
      marker.setMap(map); 
      markers.push(marker); 

     } 
    } 

    }); 
}); 

Oto wersja JSON:

google.maps.event.addListener(layer, 'click', function(event) { 

    // Clear all markers 
    while(markers.length) { 
     markers.pop().setMap(null); 
    } 

    // Get Polygone from FustionTable 
    getMountainPolygonFromFusionTable(event.row.label.value).then(function(mountainPolygons) { 

     $.getJSON(uri).done(function (data) { 

      // On success, 'data' contains a list of mountains. 
      $.each(data, function (key, item) { 

       //Put seperate data fields into one variable 
       var latLng = new google.maps.LatLng(item.Latitude, item.Longitude); 

       if (google.maps.geometry.poly.containsLocation(latLng, mountainPolygons)) { 

        // @todo set infowindow, title... 
        var marker = new google.maps.Marker({ 
         position: latLng, 
         title: 'Marker info here', 
        }); 
        marker.setMap(map); 
        markers.push(marker); 

       } 

      }); 

     }); 
    }); 
}); 

Here's the Fiddle - XML

Here's the Fiddle - JSON

And here's what the JSON API might look like