如何使用两个Google Fusion Tables数据？地图样式设置求助

嘿，我明白你遇到的这个困扰了——其实Google Maps API完全支持给每个Fusion Table Layer单独设置样式，只是你可能没给第二个图层单独配置样式规则而已！

要解决这个问题，核心思路是为每个Fusion Table图层创建独立的样式规则对象，然后在初始化每个图层时，把对应的样式规则传入配置选项中。下面是具体的实现示例：

完整代码示例 #

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
function initMap() {
  // 初始化地图，聚焦美加区域
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.5231, lng: -122.6765},
    zoom: 3
  });

  // 👉 为第一个公开表格定义专属样式
  const usServiceAreaStyle = [
    // 默认样式
    {
      featureType: 'all',
      stylers: [{color: '#E87E04'}, {opacity: 0.6}]
    },
    // 针对特定数据的样式（注意where条件要匹配表格列名）
    {
      where: "服务等级 = '优先'",
      stylers: [{color: '#D35400'}, {opacity: 0.8}]
    }
  ];

  // 👉 为第二个公开表格定义专属样式
  const caServiceAreaStyle = [
    // 默认样式
    {
      featureType: 'all',
      stylers: [{color: '#3498DB'}, {opacity: 0.5}]
    },
    // 针对特定数据的样式
    {
      where: "覆盖省份 = '安大略'",
      stylers: [{color: '#2980B9'}, {opacity: 0.7}]
    }
  ];

  // 创建第一个服务区图层并应用样式
  const usLayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry', // 替换为你表格中的几何列名
      from: 'YOUR_US_PUBLIC_TABLE_ID' // 替换为第一个公开表格ID
    },
    styles: usServiceAreaStyle,
    map: map
  });

  // 创建第二个服务区图层并应用样式
  const caLayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry', // 替换为你表格中的几何列名
      from: 'YOUR_CA_PUBLIC_TABLE_ID' // 替换为第二个公开表格ID
    },
    styles: caServiceAreaStyle,
    map: map
  });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=fusiontables&callback=initMap"></script>

关键注意点 #

• 每个图层的styles配置是独立的，你可以根据对应表格的数据结构（比如列名、数据分类）定制完全不同的样式规则
• 确保where条件中的列名和你使用的公开表格列名完全匹配，否则样式规则不会生效
• 加载Maps API时别忘了添加&libraries=fusiontables参数，否则Fusion Tables Layer功能无法正常使用

这样配置后，两个Fusion Table图层就会各自应用对应的样式，同时显示在地图上啦！

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