Google Maps JS API：仅在指定地图类型加载Google Fusion Table图层问题

兄弟，我之前做类似项目时踩过一模一样的坑！你遇到的问题核心是地图类型切换时的图层管理逻辑有漏洞——第一次加载Buildings地图时图层能正常初始化，但切走再切回来时，要么图层实例被销毁了，要么没有重新触发图层的添加逻辑。下面给你几个亲测有效的解决方案：

1. 复用同一个Fusion Table图层实例（最关键） #

别每次切换到Buildings地图都重新创建图层，而是全局保存一个图层实例，通过setMap()方法控制它的显示/隐藏。这样既能避免重复创建的性能问题，也能解决切换回来不加载的问题：

// 全局变量存建筑图层，避免每次切换都重建
let buildingsLayer;

function initMap() {
  // 初始化波士顿地图
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 42.3601, lng: -71.0589},
    zoom: 12,
    mapTypeControl: true,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'buildings'] // 包含自定义地图类型
    }
  });

  // 创建你定义的"Buildings"风格化地图
  const buildingsMapStyle = new google.maps.StyledMapType(
    // 这里替换成你的自定义样式数组
    [{featureType: 'landscape', stylers: [{color: '#f5f5f5'}]}],
    {name: 'Buildings'}
  );

  // 注册自定义地图类型到地图实例
  map.mapTypes.set('buildings', buildingsMapStyle);

  // 提前初始化Fusion Table图层，初始不显示
  buildingsLayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '你的Fusion Table ID' // 替换成你的表格ID
    },
    map: null // 初始不添加到地图
  });

  // 监听地图类型切换事件，控制图层显示
  map.addListener('maptypeid_changed', () => {
    const currentType = map.getMapTypeId();
    if (currentType === 'buildings') {
      // 切回Buildings地图，把图层挂到地图上
      buildingsLayer.setMap(map);
    } else {
      // 切到其他地图，移除图层
      buildingsLayer.setMap(null);
    }
  });
}

2. 排查事件监听是否失效 #

如果上面的代码还是不行，打开浏览器控制台（F12），给事件监听加日志，确认切换到Buildings地图时事件是否触发，图层实例是否存在：

map.addListener('maptypeid_changed', () => {
  const currentType = map.getMapTypeId();
  console.log('当前切换到:', currentType);
  console.log('建筑图层实例是否存在:', !!buildingsLayer);
  // ... 其他逻辑
});

如果日志里看不到切换到buildings的记录，说明你的自定义地图类型ID可能写错了，或者事件监听没有正确绑定到地图实例上。

3. 避免异步加载的坑 #

如果你的Fusion Table图层需要动态加载查询条件（比如异步获取表格ID），一定要确保异步操作完成后再调用setMap()。比如：

// 异步获取Fusion Table ID的例子
async function loadBuildingsLayer(map) {
  const tableId = await fetchYourTableId(); // 你的异步请求
  buildingsLayer = new google.maps.FusionTablesLayer({
    query: {select: 'geometry', from: tableId},
    map: null
  });
}

// 初始化时先加载图层
function initMap() {
  // ... 地图初始化代码
  loadBuildingsLayer(map);
}

这样切换回Buildings地图时，图层实例已经准备好，直接调用setMap(map)就能显示。

内容的提问来源于stack exchange，提问作者CodingGrandma