Question

我有来自谷歌的以下修改代码，它显示了一个包含来自我的某个融合表的多边形的地图。融合表有两个字段 - id和amp;几何。多边形显示良好，悬停效果很好。

我的问题是如何让content-window div显示点击多边形的id号。当单击时，测试监听器当前在内容窗口div中显示“测试”文本，但我无法显示融合表查询中的单击多边形的id（var query ='SELECT id，geometry FROM '+'MYMAPID';）

   <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;

function initialize() {
    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(32.157435,-82.907123),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),myOptions);

    // Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT id,geometry FROM ' + 'MYMAPID';
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=drawMap');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    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)
    {
        newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);

        var country = new google.maps.Polygon
        ({
            paths: newCoordinates,
            strokeColor: "#ff0000",
            strokeOpacity: 1,
            strokeWeight: 1,
            fillOpacity: 0.3
        });

        google.maps.event.addListener(country, 'mouseover', function() {
          this.setOptions({fillOpacity: 1});
        });

        google.maps.event.addListener(country, 'mouseout', function() {
          this.setOptions({fillOpacity: 0.3});
        });
        //test listener
        google.maps.event.addListener(country, 'click', function() {
         document.getElementById('content-window').innerHTML ='test';
        });

        country.setMap(map);
    }
}


function constructNewCoordinates(polygon)
{
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates)
    {
        newCoordinates.push(
        new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

感谢：）

编辑：

我想我可以接受@geocodezip帮助我并使用听众的ID：

google.maps.event.addListener(country, 'click', function() {

          getAreas(id);

        });

...将其传递给下面的函数，让它从具有该id的单独Fusion表中提取多个“name”字段。

function getAreas(id)
{
// Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT name FROM ' + 'MY TABLE 2' + 'WHERE id=' + id;
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=showAreas');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);

}

function showAreas(data)
{
    var rows = data['rows'];
    for (var i in rows)
    {         
        var name = rows[i][0];       
        document.getElementById('content-window').innerHTML = name;
    }
}

但这不起作用。有谁知道我做错了什么？

由于

Answer 1

如果您从this example开始，则ID为：

 var id = rows[i][0];

为了将其与“country”多边形相关联，我将使用函数闭包：

  function createPolygon(country,id)
  {
        google.maps.event.addListener(country, 'mouseover', function() {
          this.setOptions({fillOpacity: 1});
        });
        google.maps.event.addListener(country, 'mouseout', function() {
          this.setOptions({fillOpacity: 0.3});
        });
        google.maps.event.addListener(country, 'click', function() {
           document.getElementById('content-window').innerHTML = id;
        });
  }

working example

Google地图融合表悬停并点击

1 个答案: