fusion table google maps infowindow return 特定列

Question

我正在使用融合 table 向 javascript 中的 google 地图添加一层多边形（区域线）。但我想在信息窗口上显示，当您单击地图上的多边形时，特定列而不是当前默认显示的所有列值。

这是我的代码，我得到了 return 一些位置信息。默认信息窗口被禁用。那么在点击事件中，如何引用融合table?

layer = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query:{
      from:tableid,
      select: 'geometry'
    },
    styles:[{polygonOptions:{fillOpacity:0.01}}
    ],
    options: {
      styleId: 2,
      templateId: 2
    }});
    layer.setOptions({query:{select:'geometry',
                  from: tableid}});
    layer.setMap(map);

google.maps.event.addListener(layer, 'click', function(event) {
alert(event.latLng.lat() + ", " + event.latLng.lng());
});

我的融合 table 有一个名为 ID 的列，当我单击多边形时，我应该只会看到关联的 ID 号。

已尝试执行此操作但未显示任何内容：

e.infoWindowHtml = "ID" + e.row['ID'].value;

谢谢。

Answer 1

FusionTablesMouseEvent 包含对包含单击多边形的 table 行的引用。

google.maps.event.addListener(layer, 'click', function(event) {
  infoWindow.setContent(event.row["ID"].value);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
});

proof of concept fiddle (this table doesn't contain a column ID, but the column "name" shows the concept)

代码片段：

var tableid = "1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ"
var infoWindow;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infoWindow = new google.maps.InfoWindow();
  layer = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      from: tableid,
      select: 'geometry'
    },
    styles: [{
      polygonOptions: {
        fillOpacity: 0.01
      }
    }],
    options: {
      styleId: 2,
      templateId: 2
    }
  });
  layer.setOptions({
    query: {
      select: 'geometry',
      from: tableid
    }
  });
  layer.setMap(map);

  google.maps.event.addListener(layer, 'click', function(event) {
    console.log(event.row["name"].value);
    console.log(event.latLng.toUrlValue(6));
    infoWindow.setContent(event.row["name"].value);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

fusion table google maps infowindow return 特定列

fusion table google maps infowindow return specific column

javascript

google-maps

google-fusion-tables