在 Google 地图中组合 w Fusion Tables 图层时，KML infowindows 出现故障

Question

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

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

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

我的目标：

-- 让 KML 和 Fusion Table 图层在单击项目时启动适当的信息窗口，其中包含信息；

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

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

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

-- 2个融合表

-- 工作正常

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

-- 1 kml 文件，完美运行 -- 还有 1 个融合表，但地图上没有显示内容（公园矩形）。 （我从一个不同的样本开始，不知道如何集成融合层）。

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

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

-- 我将 suppressInfoWindows: true 应用于 KML 图层--> 结果是，当我单击该图层中的标记时，地图仅显示一个微小的存根弹出窗口，底部有一个箭头 - - 没有信息显示。但它确实像一个适当的信息窗口一样运行，单击关闭前一个窗口。

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

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

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

1. 单击 kml 文件中的某些内容（水道、岛屿、鸽子图标）——那个小存根仍然出现（在底部），但现在信息窗口也会弹出。

2. 单击融合表层中的某些内容（公园 - 彩色矩形），KML 信息窗口仍保留在地图上——这意味着打开了两个信息窗口。 （尽管单击融合表层中的标记确实会关闭 KML 的小存根窗口。）

3. 然后单击 KML 层中的某些内容，它会关闭融合表层启动的窗口。

我相信您可以在每个测试页面上查看 PAGE SOURCE，因此我不包括此处的编码。

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

顺便说一句，我几年前就开始整理这些东西，必须感谢当时帮助我解决一些编程挑战的 stackoverflow 志愿者（尤其是 Eric Bridger）。

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

Answer 1

对于FusionTables 点击事件，.infoWindowHtml 是事件的属性。对于KmlLayer，.infoWindowHtml 位于事件的 .featureData 属性中。

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

e.featureData.infoWindowHtml

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

e.infoWindowHtml

为所有层更改suppressInfoWindows:true。更改 click 事件处理程序以通过查找 .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);
  }

代码 sn-p：

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>