google maps, таблицы слияния и маркеры

Question

Я искал всюду в документации, чтобы объяснить, как я могу показать только маркеры для данной области таблицы слияния.

На данный момент все маркеры появляются на карте, как так:

Fusion Table Google Maps

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

Если нажать на область слитого таблицы/карта Google, я получаю имя области во всплывающем меню, как и ожидалось, однако я не хочу сначала отображать какие-либо маркеры. Когда щелкнута область таблицы/карты слияния, я хочу, чтобы она показывала маркеры только для данной области, а не для всей карты.

Это, как я добавить маркеры на карте от моего веб-Апи:

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

я видел в документации на where заявление, которое может быть добавлено к таблицам слияния. Как так:

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

Однако данные с веб-Апи не сегментирован в конкретных областях, это просто один длинный список широт и долгот. Нравится так:

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

Есть ли у Google что-то вроде способа смешивания геометрии таблицы слияния с координатами? Простой способ отображения всех маркеров для данной области? Или может кто-нибудь подумать о том, как это можно сделать?

Некоторые дополнительные подробности о WebAPI упаковывают это необходимо:

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

К сожалению, нет никакой функции containsLocation в FusionTablesLayer.

Одним из решений является создание многоугольника Google Maps из FusionTablesLayer, позволяющего использовать containsLocation, чтобы определить, следует ли добавлять маркер к карте.

Сначала нам нужны координаты для создания многоугольника. Мы можем использовать google.visualization.Query, чтобы захватить координаты выбранной области из слитого таблицы:

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

    }); 

    }); 
} 

Тогда мы просто проходного массива гор и проверить, если выбранная область содержит гору:

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

     } 
    } 

    }); 
}); 

Вот версия 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