2

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

我的问题是如何让内容窗口 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 Table 中提取多个“名称”字段。

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

但这不起作用。有人知道我在做什么错吗？

谢谢

4

1 回答 1

4

如果您从此示例开始，则 id 为：

 var id = rows[i][0];

为了让它与“国家”多边形相关联，我会使用一个函数闭包：

  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;
        });
  }

工作示例

于 2012-07-05T06:58:11.887 回答