从 Google Fusion Tables 中单独检索多边形信息答案

【问题标题】：Retrieving individually polygon information from Google Fusion Tables从 Google Fusion Tables 中单独检索多边形信息
【发布时间】：2016-06-11 16:50:19
【问题描述】：

我正在使用以下示例来在 Fusion 表中使用（假）鼠标悬停事件。它实际上正在工作，因为它是。但是点击事件没有按我的意愿工作（它在 drawMap 函数内）

问题出现在以下代码行：

infowindow.setContent(rows[i][7]);

我想在单击每个多边形时检索名为“Nome_Reg”（索引 7）的第 8 列的信息。

每个多边形的该列都有不同的属性。但是，我这样做的方式是只返回最后绘制的多边形的信息，而不是单独从多边形返回。

你有提示为什么它不起作用吗？

<!DOCTYPE html>
<html>
    <head>
    <title>Regions</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
        #info-box {
            background-color: white;
            border: 1px solid black;
            bottom: 30px;
            height: 20px;
            padding: 10px;
            position: absolute;
            left: 30px;
        }
    </style>

    <!-- loading Jquery file -->
    <script src="https://dl.dropboxusercontent.com/u/39041929/site/MapaTravessia/Includes/jquery-1.12.3.min.js"></script>

    <script>
        //Loading JQuery
        $(document).ready(function(){

            var map;
            var infowindow;

            var Regions;

        });

        function initMap() {    

            map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: {lat: -18.92990560776172 , lng: -43.4406814550781},}); 

            infowindow = new google.maps.InfoWindow({maxWidth: 300});

            // Initialize JSONP request
            var script = document.createElement('script');
            var url = ['https://www.googleapis.com/fusiontables/v2/query?'];
            url.push('sql=');
            var query = 'SELECT * FROM ' +
            '16lyNB62unqHuH3fh94lHGDrGEwQVTztRIzm_DWsf';
            var encodedQuery = encodeURIComponent(query);
            url.push(encodedQuery);
            url.push('&callback=drawMap');  //Calls the drawMap function
            url.push('&key=AIzaSyCoC9A3WgFneccRufbysInygnWrhCie-T0');
            script.src = url.join('');
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(script);
        }


        function drawMap(data) {
            console.log(data);
            var rows = data['rows'];
            for (var i in rows) {
                var newCoordinates = [];
                var geometries = data['rows'][i][0]['geometries'];
                if (geometries) {
                  for (var j in geometries) {
                    newCoordinates.push(constructNewCoordinates(geometries[j]));
                  }
                } else {
                  newCoordinates = constructNewCoordinates(rows[i][0]['geometry']);
                }

                var colors = ['#AF4604', '#AF8A04', '#037158']; 
                var ColorReceived;
                if (rows[i][5] == 'CMD') ColorReceived = 0;
                if (rows[i][5] == 'AM') ColorReceived = 1;
                if (rows[i][5] == 'DJ') ColorReceived = 2;

                Regions = new google.maps.Polygon({
                  paths: newCoordinates,
                  strokeColor: colors[ColorReceived],
                  strokeOpacity: 1,
                  strokeWeight: 1,
                  fillColor: colors[ColorReceived],
                  fillOpacity: 0.5
                });

                //Working Mouseover event
                google.maps.event.addListener(Regions, 'mouseover', function() {
                    this.setOptions({strokeWeight: 3});
                });
                //Working Mouseout event
                google.maps.event.addListener(Regions, 'mouseout', function() {
                    this.setOptions({strokeWeight: 1});
                });

                //NOT WORKING CLICK EVENT 
                google.maps.event.addListener(Regions, 'click', function (event) {
                    infowindow.setPosition(event.latLng);
                    infowindow.setContent(rows[i][7]);
                    infowindow.open(map);

                });

                Regions.setMap(map);
            }

        }

        //access the lat and long for each node and return a array containing those values, extracted from fusion table.
        function constructNewCoordinates(polygon) {
            var newCoordinates = [];
            var coordinates = polygon['coordinates'][0];
            for (var i in coordinates) {
              newCoordinates.push(
                // write the lat and long respectively
                  new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
            }
            return newCoordinates;
        }
    </script>
    </head>

    <body>
        <div id="map"></div>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFYwb6-B6u2cs5oknTRwtfBng2kgdDMgk&callback=initMap">
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-fusion-tables

【解决方案1】：

您将 click-listener 添加到 Polygon，而不是 FusionTablesLayer（只有 event.row 可用）。

可能的解决方案：

在循环中创建 Polygon-property，您可以在其中存储特定行并在点击处理程序中访问此属性

//Loading JQuery
        $(document).ready(function(){

            var map;
            var infowindow;

            var Regions;

        });

        function initMap() {    

            map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: {lat: -18.92990560776172 , lng: -43.4406814550781},}); 

            infowindow = new google.maps.InfoWindow({maxWidth: 300});

            // Initialize JSONP request
            var script = document.createElement('script');
            var url = ['https://www.googleapis.com/fusiontables/v2/query?'];
            url.push('sql=');
            var query = 'SELECT * FROM ' +
            '16lyNB62unqHuH3fh94lHGDrGEwQVTztRIzm_DWsf';
            var encodedQuery = encodeURIComponent(query);
            url.push(encodedQuery);
            url.push('&callback=drawMap');  //Calls the drawMap function
            url.push('&key=AIzaSyCoC9A3WgFneccRufbysInygnWrhCie-T0');
            script.src = url.join('');
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(script);
        }


        function drawMap(data) {
            var rows = data['rows'];
            for (var i in rows) {
                var newCoordinates = [];
                var geometries = data['rows'][i][0]['geometries'];
                if (geometries) {
                  for (var j in geometries) {
                    newCoordinates.push(constructNewCoordinates(geometries[j]));
                  }
                } else {
                  newCoordinates = constructNewCoordinates(rows[i][0]['geometry']);
                }

                var colors = ['#AF4604', '#AF8A04', '#037158']; 
                var ColorReceived;
                if (rows[i][5] == 'CMD') ColorReceived = 0;
                if (rows[i][5] == 'AM') ColorReceived = 1;
                if (rows[i][5] == 'DJ') ColorReceived = 2;

                Regions = new google.maps.Polygon({
                  paths: newCoordinates,
                  strokeColor: colors[ColorReceived],
                  strokeOpacity: 1,
                  strokeWeight: 1,
                  fillColor: colors[ColorReceived],
                  fillOpacity: 0.5,
                  row: (function(index){
                          var row={};
                          for(var j=0;j<data['rows'][index].length;++j){
                            row[data.columns[j]]=data['rows'][index][j];
                          }
                          return row;
                        })(i)
                });

                //Working Mouseover event
                google.maps.event.addListener(Regions, 'mouseover', function() {
                    this.setOptions({strokeWeight: 3});
                });
                //Working Mouseout event
                google.maps.event.addListener(Regions, 'mouseout', function() {
                    this.setOptions({strokeWeight: 1});
                });

                
               
                // Working click event
                
                google.maps.event.addListener(Regions, 'click', function (event) {
                     var Content = this.row['Nome_Reg'];
                    infowindow.setPosition(event.latLng);
                    infowindow.setContent(Content);
                    infowindow.open(map);

                });
                
                
                
                 

                

                Regions.setMap(map);
            }

        }

        //access the lat and long for each node and return a array containing those values, extracted from fusion table.
        function constructNewCoordinates(polygon) {
            var newCoordinates = [];
            var coordinates = polygon['coordinates'][0];
            for (var i in coordinates) {
              newCoordinates.push(
                // write the lat and long respectively
                  new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
            }
            return newCoordinates;
        }

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
        #info-box {
            background-color: white;
            border: 1px solid black;
            bottom: 30px;
            height: 20px;
            padding: 10px;
            position: absolute;
            left: 30px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?callback=initMap">
        </script>

【讨论】：