如何从KML文件中将一对融合表与GroundOverlays集成?更新了我试图解决的问题(未成功）

how to integrate a pair of fusion tables with GroundOverlays from a KML file? Updated with my attempt to solve (unsuccessful)

本文关键字：更新 解决 未成功 问题 集成 GroundOverlays 文件 KML 融合      更新时间：2023-09-26

我的问题的简短版本：
如何将一对谷歌地图融合表（多边形和标记）与KML文件中的GroundOverlay集成？一切都可以点击。

背景：我正在做一个交互式历史地图项目，该项目使用两层融合表（一层是多边形，另一层是位置标记）。

我还想通过GroundOverlay覆盖旧地图——这目前在融合表中是不可能的——所以我一直在KML文件中尝试GroundOverflow。

我在两个页面上都添加了监听器来控制点击框，这让它变得复杂起来。

我有两个网页：
1.融合表和
2.KML地面覆盖层，
两者都运行良好。

我想做的是将它们集成到一个页面中。我不是一个程序员，对JS的理解也不足以实现这一点。

使用的脚本都是根据网上的例子改编的。

这是我的第一个工作页面：
http://wendysmithtoronto.com/mapping/townofyork-fusiontables2.html

你会在那里找到第二页的链接。

非常感谢您的帮助。非常感谢。Wendy

更新：

以下是我对合并两组数据的努力：

http://wendysmithtoronto.com/mapping/townofyork-merged.html

我试图通过将kmlmaps页面中的一些脚本添加到fusiontables页面来实现这一点，但很明显，我没有把东西放在正确的位置。或者是缺少标点符号（或者混淆了不同类型的脚本，或者？）

此时将显示贴图，多边形和标记都将正确显示。但现在（1）融合表图标不可点击，（2）历史地图不显示。但是，融合表复选框（蓝色表中）确实有效。

我对JS的理解不够好，无法理解。

两个页面中的两组控件都在这里（位于地图上方的蓝色和灰色框中）。每一组控件（监听器和点击框）在自己的微信页面中都运行良好，但现在只有融合表控件可以工作。

孙，谢谢你看这个！（我刚刚找到你的回复。我一直在关注回复通知，但没有检查正确的地方。）

干杯，Wendy

html文件的javascript部分存在重大错误。您真的应该学习同样的基本javascript，尤其是使用带有GMapneneneba API的JS。

您创建了2个全局地图对象。您没有在initialize函数（）中封装所有地图和图层创建。所有贴图和图层的创建都必须在initialize（在实体加载时）函数中完成。您必须在初始化函数之外设置全局变量，例如映射、所有层等。最后，您未能在2个KML层上调用layer.setMap(map)。

尽管如此，我还是修复了你的文件，真的只是重新安排了一下。这只是我必须修复的部分。将所有内容移动到initialize（）中

     function showbuildings(buildingcheck) {
    if (buildingcheck.checked == true)
      {
        campusmap.setMap(map);
      } else {
        campusmap.setMap(null);
      }
  }

  function showphilpotts(philpottscheck) {
    if (philpottscheck.checked == true)
      {
        philpotts.setMap(map);        
      } else {
        philpotts.setMap(null);
      }
  }

  function showbeartrail(beartrailcheck) {
    if (beartrailcheck.checked == true)
      {
        beartrail.setMap(map);        
      } else {
        beartrail.setMap(null);
      }
  }

var infoWindow = new google.maps.InfoWindow();
function openIW(FTevent) {
  // infoWindow.setContent(FTevent.infoWindowHtml);
  // infoWindow.setPosition(FTevent.latLng);
  infoWindow.setOptions(
    { 
     content: FTevent.infoWindowHtml,
     position: FTevent.latLng,
     pixelOffset: FTevent.pixelOffset
    });
  infoWindow.open(map);
}
// Globals
//Begin map parameters
var map;
var layer_2;
var layer_1;
var tableid_1 = 2920040;  // polygons
var tableid_2 = 3189980;  // houses
var zoom = 12;
var center = new google.maps.LatLng(43.652417455515476, -79.37926607055226);
var campusmap;
var philpotts;
var beartrail;
function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
   //End map parameters
    campusmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851mapshoreline.kml',  {preserveViewport:true, suppressInfoWindows:true});
    campusmap.setMap(map);
    google.maps.event.addListener(campusmap, 'click', function(kmlEvent) {
      document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
    });         
   philpotts = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818maplieutphilpottsd.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(philpotts, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
   });    
    philpotts.setMap(map);
    beartrail = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842map-jamescaneb.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(beartrail, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
  }); 
   beartrail.setMap(map);
layer_2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '3189980'
  },
styles: [
  {where: "'style' = 14", markerOptions:{ iconName:"star"}},
  {where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}},
  {where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes

  {where: "'style' = 15", markerOptions:{ iconName:"target"}},
  ]});
layer_1 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '2920040'
  }}),
 google.maps.event.addListener(layer_1, "click", openIW);
 google.maps.event.addListener(layer_2, "click", openIW);
 google.maps.event.addListener(map, "click", function() { infoWindow.close();});
layer_1.setMap(map);
layer_2.setMap(map);
} // end initialize
相关文章：