谷歌地图融合表悬停,然后点击(Google maps fusion tables hover and

2019-09-19 03:17发布

我已经从谷歌显示与从我的融合表之一多边形地图以下修改的代码。 融合表有两个字段 - ID和几何。 多边形显示效果细腻与效果很好悬停。

我的问题是如何获得内容窗口div来显示点击多边形的ID号。 点击后,但我不能得到它显示的点击多边形是在融合表查询(VAR查询的id =“SELECT标识,几何形状从测试监听当前显示在内容窗格“测试”文本'+ '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一个单独的融合表拉多个“名称”字段。

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:

如果你开始从这个例子中的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;
        });
  }

工作示例



文章来源: Google maps fusion tables hover and click