使用 Google Maps API 和 Fusion Tables 创建指向另一个页面的多边形链接答案

【问题标题】：Make a polygon link to another page using Google Maps API and Fusion Tables使用 Google Maps API 和 Fusion Tables 创建指向另一个页面的多边形链接
【发布时间】：2015-01-02 20:16:07
【问题描述】：

我正在尝试弄清楚如何将由 Google Fusion 表创建的 Google Maps 多边形（整个多边形）作为指向不同页面的可点击链接。我原本想为多边形添加一个事件侦听器并使用“this”，但我忘记了这不起作用，因为我没有生成多边形，融合表是。如果有人能指出我正确的方向或提供帮助，将不胜感激！

到目前为止，我所拥有的是融合表的正常代码：

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(...)

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

【问题讨论】：

Sooooo 是否有理由拒绝提出问题？
Event when clicking on FusionTablesLayer polygon 的可能重复项
^ 我知道那个问题也提到了 Fusion Tables，但是仅仅链接到您对另一个列出 MouseEvents 选项的问题的答案并不能完全清楚这一点。
您现有的代码是什么样的？请参阅How do I ask a good question。

标签： javascript google-maps google-fusion-tables

【解决方案1】：

FusionTableLayer 在其row 属性中有一个FusionTablesMouseEvent，其中包含表中该行的所有信息：

行 |目的。 | FusionTablesCell 对象的集合，按列名索引，表示包含点击特征的表格行的内容。）

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

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

【讨论】：

谢谢！很好的答案！快速提问：为什么 addListener 中的第一个参数是“v”？我原以为应该是“多边形”。
这是一个错字（应该是layer_1，FusionTablesLayer 对象）。

【解决方案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);

【讨论】：