谷歌地图，融合表和标记

Question

我在文档中随处搜索，以解释如何只显示融合表给定区域的标记。

目前所有标记出现在地图上，像这样：

Fusion Table Google Maps

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

如果你点击融合表/谷歌地图，我得到的面积区域名称按预期弹出，但我不想在最初显示任何标记。当点击融合表/地图区域时，我希望它仅显示该给定区域的标记，而不是整个地图。

这是我如何添加标记到地图，从我的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; 
      } 
     } 

我的文档中看到，可以加入到融合表一where声明。像这样：

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

但是，来自Web API的数据没有被分割到特定的区域，它只是一个长和宽的经纬度列表。像这样：

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

谷歌有没有什么在融合表几何与坐标混合的方式？显示给定区域的所有标记的简单方法？或者任何人都可以想到这样做的方式？

有关的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

不幸的是，在FusionTablesLayer会没有containsLocation功能。

一种解决方案是从FusionTablesLayer创建Google Maps Polygon，允许我们使用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