使用 Google 地图 API 和 Fusion Tables 将多边形 link 创建到另一个页面

Question

我正在尝试弄清楚如何使由 Google Fusion tables 创建的 Google 地图多边形（整个多边形）成为可点击的 link 到不同的页面。我最初想向多边形添加一个事件侦听器并使用 "this" 但我忘记了那是行不通的，因为我没有生成多边形，融合 table 是。如果有人能指出我正确的方向或提供帮助，我们将不胜感激！

到目前为止我所拥有的是融合的正常代码table:

var map;
var layer_1;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(33.205, -97.1325),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer_1 = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      select: "col0",

      from: "/*Fustion Table ID*/",

    },
    map: map,
    styleId: 2,
    templateId: 2
  });

}

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

我在想我可以添加一个监听器，例如：

google.maps.event.addListener(polygon, 'click', function (event) {
     //Find the polygon's website URL
    });

并使用它来触发页面重定向，例如

window.location.replace(...)

或多或少使多边形成为一个巨人 link，但有人建议我不要这样做。

Answer 1

A FusionTableLayer has a FusionTablesMouseEvent，其中包含 table 行的所有信息，在其 row 属性:

row | Object. | A collection of FusionTablesCell objects, indexed by column name, representing the contents of the table row which included the clicked feature.)

像这样使用它（确切的代码将取决于您尚未共享的table）：

layer_1 = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      select: "col0",

      from: "/*Fustion Table ID*/",

    },
    map: map,
    styleId: 2,
    templateId: 2
  });
google.maps.event.addListener(layer_1, 'click', function(evt) {
   // code to open the URL based on the data in that row of your fusion table
});

Answer 2

这是我最终使用的代码，以防有人在寻找类似的东西：

var map;
var layer_1;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(33.205, -97.1325),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer_1 = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      select: "col0",

      from: "*** Fusion Table Idea goes here ***",

    },
    map: map,
    styleId: 2,
    templateId: 2
  });

  google.maps.event.addListener(layer_1, 'click', function(evt) {
   var url = evt.row.website.value;
   console.log(url);
   window.location = url;
  });

}


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

使用 Google 地图 API 和 Fusion Tables 将多边形 link 创建到另一个页面

Make a polygon link to another page using Google Maps API and Fusion Tables

javascript

google-maps

google-fusion-tables