谷歌地圖，融合表和標記

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