在Google地图上的Fusion Tables图层上显示来自信息窗口的数据

时间:2013-01-13 18:30:19

标签: google-maps-api-3 google-fusion-tables infowindow

我正在构建我的第一个Fusion Tables,并将两个Fusion Tables引入Google Map - 一个多边形和一个点。当你点击多边形或一个点时,我不想显示常规信息窗口,而是想从Fusion Table中提取一些数据,但它无法正常工作:

<script>
  function initialize() {
    var england = new google.maps.LatLng(53.2, -2);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: england,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    layer1 = new google.maps.FusionTablesLayer({
      query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
      styles: [
        { where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
        { where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
        { where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
        { where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
    options: {suppressInfoWindows: true},
    map: map,
    });
    google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;}
    });

    layer2 = new google.maps.FusionTablesLayer({
    query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
    options: {suppressInfoWindows: true},
    map: map,
     });
    google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;}
    });

    google.maps.event.addDomListener(window, 'load', initialize);

  }
</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

It was all working well,infowindows被抑制,直到我添加了AddListener和addDomListeners。有人可以帮我恢复正常吗?

2 个答案:

答案 0 :(得分:2)

  1. 您的“新”代码中存在语法错误(两个额外的“}”)
  2. 你在初始化函数中调用了addDomListener(因为你在<body标签中仍然没有这个问题,但是你真的不应该把它放在两个地方。

    <script>
     function initialize() {
     var england = new google.maps.LatLng(53.2, -2);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: england,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    layer1 = new google.maps.FusionTablesLayer({
      query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
      styles: [
        { where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
        { where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
        { where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
        { where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
    options: {suppressInfoWindows: true},
    map: map,
    });
    google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;});
    layer2 = new google.maps.FusionTablesLayer({
    query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
    options: {suppressInfoWindows: true},
    map: map,
     });
     google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;});
     }
     google.maps.event.addDomListener(window, 'load', initialize);
     </script>
     </head>
      <body>
       <div id="map_canvas"></div>
    </body>
    </html>
    
  3. working example 修改为使用此函数使每个图层的infowindows工作:

    function openIW(FTevent) {
      // infoWindow.setContent(FTevent.infoWindowHtml);
      // infoWindow.setPosition(FTevent.latLng);
      infoWindow.setOptions(
        { 
         content: FTevent.infoWindowHtml,
         position: FTevent.latLng,
         pixelOffset: FTevent.pixelOffset
        });
      infoWindow.open(map);
    }
    

答案 1 :(得分:0)

google.maps.event.addListener(layer, 'click', function(e) {
    console.log("E.Row! : "+ e.row['name'].value);
});