javascript - 谷歌地图、融合表和标记

Question

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

此时所有标记都出现在 map 上，如下所示:

Fusion Table Google Maps

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

如果您单击融合表/谷歌地图的某个区域，我会按预期在弹出窗口中获得区域名称，但是我最初不想显示任何标记。单击融合表/ map 的某个区域时，我希望它仅显示该给定区域的标记，而不是整个 map 。

这是我从 Web Api 向 map 添加标记的方式:

         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>

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

很遗憾，FusionTablesLayer 中没有 containsLocation 函数。

一种解决方案是从 FusionTablesLayer 创建 Google map 多边形，允许我们使用 containsLocation 来确定是否将标记添加到 map 。

首先我们需要坐标来创建多边形。我们可以使用 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