Question

我的交互式地图项目有一个小问题，我一直无法解决。

地图有几层，一对使用KML文件中的数据，另一些使用Fusion Tables文件。

问题是KML图层启动的infowindows无法正常运行。从KML图层点击地图上的项目实际上似乎启动了两个窗口 - （1）一个infowindow和（2）底部的一个小存根窗口，可以单击一个X来关闭它。

我的目标：

- 让KML和Fusion Table图层在点击项目时启动包含信息的正确信息窗口;

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

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

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

- 2个融合表

- 工作正常

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

- 1 kml文件，效果很好 - 也是1个融合表，但内容（公园地块矩形）不会出现在地图上。（我从一个不同的样本开始，无法弄清楚如何整合融合层。）

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

- 具有1个融合表层（parklots - 彩色矩形）和1公里的层（水道，岛屿，鸽子图标）

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

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

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

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

点击kml文件中的某些内容（水道，岛屿，鸽子图标） - 仍然会出现小的存根（位于底部），但现在信息窗口也会弹出。
< / LI>
点击融合表层中的某些内容（parklots - 彩色矩形），KML信息窗保留在地图上 - 这意味着打开两个信息窗口。（虽然点击融合表层中的标记，但是要关闭KML的小存根窗口。）
然后点击KML图层中的内容，它会关闭融合表层启动的窗口。

我相信您可以在每个测试页面上查看页面源，因此我不在此处编写代码。

以下是实际项目的链接：http://parklotproject.com

顺便说一下，几年前我开始把它放在一起了，一定要感谢那些曾帮助我解决一些编程挑战的stackoverflow志愿者（尤其是Eric Bridger）。

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

Answer 1

对于FusionTables点击事件，.infoWindowHtml是事件的属性。对于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);
  }

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: