在 Google 地图中组合 w Fusion Tables 层时，KML 信息窗口出现故障

Question

我的交互式地图项目出现问题，一直无法解决。

地图有多个图层，其中几个图层使用 KML 文件中的数据，其他图层使用 Fusion Tables 文件中的数据。

问题是 KML 图层启动的信息windows 无法正常运行。从 KML 层单击地图上的项目实际上似乎会启动两个 windows -- (1) 一个信息 window 和 (2) 底部的一个小存根 window，带有一个可以点击关闭的X。

我的目标：

-- 让 KML 和 Fusion Table 图层启动正确的信息windows，并在单击项目时提供信息；

-- 让每次新点击关闭屏幕上已有的信息window，并打开一个包含新信息的信息window。

我做了一些研究和测试，得出了这四个测试页面，它们说明了问题的不同方面：

一个。 http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows.html

-- 2融合tables

-- 工作正常

两个。 http://wendysmithtoronto.com/parklotproject/test-kml-clickable.html

-- 1 个 kml 文件，完美运行 -- 也是 1 个融合 table，但内容（停车场矩形）没有出现在地图上。（我从不同的示例开始，无法弄清楚如何集成融合层）。

三个。 http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows-4.html

-- 具有 1 个融合 table 层（公园 - 彩色矩形）和 1 kml 层（水道、岛屿、鸽子图标）

-- 我将 suppressInfoWindows: true 应用于 KML 图层 --> 结果是当我单击该图层中的标记时，地图仅显示一个带有底部的箭头——不显示任何信息。但它确实像一个正确的信息window一样运作，点击关闭前一个window。

四个。 http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows-false-5.html

--同上一个文件，只是KML图层设置为suppressInfoWindows: false

----> 最后一个演示了整个问题（以及我的项目目前的运行方式）：

单击 kml 文件中的某些内容（水道、岛屿、鸽子图标）——那个小存根仍然出现（在底部），但现在弹出信息 window还有。
单击融合 table 层（公园 - 彩色矩形）中的某些内容，KML 信息window 保留在地图上——这意味着两个信息 windows打开。（尽管单击融合 table 图层中的标记确实会关闭 KML 的小存根 window。）
然后单击 KML 图层中的某些内容，它会关闭由融合 table 图层启动的 window。

我相信您可以在这些测试页中的每一个上查看页面源代码，因此我不包括此处的编码。

这里是实际项目的link：http://parklotproject.com

顺便说一句，几年前我就开始把它放在一起，必须感谢当时帮助我解决一些编程挑战的 Whosebug 志愿者（尤其是 Eric Bridger）。

提前感谢您对此问题的帮助。

Answer 1

对于 FusionTables click events, the .infoWindowHtml is a property of the event. For KmlLayer，.infoWindowHtml 在事件的 .featureData 属性中。

所以对于KmlLayer的点击事件，需要使用：

e.featureData.infoWindowHtml

对于FusionTables的点击事件，需要使用：

e.infoWindowHtml

为所有图层更改suppressInfoWindows:true。更改点击事件处理程序，通过查找 .featureData 属性.

来确定点击了哪一层

  // Open the info window at the clicked location
  function windowControl(e, infoWindow, map) {
    var infoWindowHtml;
    if (e.featureData) {
      infoWindowHtml = e.featureData.infoWindowHtml;
    } else {
      infoWindowHtml = e.infoWindowHtml;
    }
    infoWindow.setOptions({
      content: infoWindowHtml,
      position: e.latLng,
      pixelOffset: e.pixelOffset
    });
    infoWindow.open(map);
  }

代码片段：

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(43.63889993, -79.40481525),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {},
    panControl: true,
    panControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    }
  });

  var infoWindow = new google.maps.InfoWindow();

  var waterwaysLayer = new google.maps.KmlLayer({
    url: 'http://wendysmithtoronto.com/parklotproject/waterways92_parklotproject.kml',
    preserveViewport: true,
    suppressInfoWindows: true
  });
  google.maps.event.addListener(waterwaysLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });

  waterwaysLayer.setMap(map);

  // Initialize the second layer
  var secondLayer = new google.maps.FusionTablesLayer({
    query: {
      select: "'Location'",
      from: '1bBnWdcpcvtuFj3svjGe1dRa3BwgDzx_Qj9n_ZE0'
    },
    map: map,
    suppressInfoWindows: true
  });
  google.maps.event.addListener(secondLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });
}

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
  var infoWindowHtml;
  if (e.featureData) {
    infoWindowHtml = e.featureData.infoWindowHtml;
  } else {
    infoWindowHtml = e.infoWindowHtml;
  }
  infoWindow.setOptions({
    content: infoWindowHtml,
    position: e.latLng,
    pixelOffset: e.pixelOffset
  });
  infoWindow.open(map);
}

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

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}
#map-canvas {
  height: 900px;
  width: 900px;
}
#visualization {
  height: 700px;
  width: 200px;
}

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

在 Google 地图中组合 w Fusion Tables 层时，KML 信息窗口出现故障

KML infowindows glitch when combined w Fusion Tables layers in a Google Map

javascript

google-maps

kml

google-fusion-tables