Google Fusion Tables：两层，一层有样式答案

【问题标题】：Google Fusion Tables: Two layers, one with styleGoogle Fusion Tables：两层，一层有样式
【发布时间】：2012-09-20 10:54:26
【问题描述】：

我正在尝试使用具有两个图层的 Google Fusion Tables 创建地图，我想在其中一个图层中添加样式。我也有多个列，我想使用下拉菜单在这些列之间切换。到目前为止，我设法做到了后者，但我一直在尝试添加第二层。

我现在拥有的地图显示了加纳 170 个地区的学校中女生与男生的比例。通过下拉菜单，我可以在小学和初中之间切换。现在我想添加一个带有区域边界的图层。

在我看到的文档中：

您可以使用 Maps API 将最多五个 Fusion Tables 图层添加到一个 map，其中一个最多可以使用五个样式规则设置样式。

这几乎正是我想要的，但我也保留了下拉菜单。我最近开始使用 Fusion Tables，希望有人能帮助我。

我要添加的层的ID：1_0rcifQnnNpLV1VjTPyzDZSF3LHp-7rowzrXM78

以及工作地图的代码：

PS：我是个新手，我以this map made by the Guardian 为基础。我删除了我认为不需要的所有内容，但代码中可能会留下一些不必要的东西。

    <!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/Article">

<head>

                <title>Gender Parity Index | Education | 2011</title>
        <meta charset="utf-8" />

                            <style type="text/css">
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 600px; width:575px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" id="script">

var center = new google.maps.LatLng(7.972198, -0.716284);
var zoom = 7;
var legend_width = '150px';
var tableid = '12GLQaH4wvwByxBk4W7UHkJTr99vsxymCTYHmkXs';
var location_column = 'geometry';
var colors = ['#CA0020','#F4A582','#F7F7F7','#92C5DE','#0571B0']; 
var columns = {
  'Gender parity index at primary education': [
    {
      'min': 0.6,
      'max': 0.8,
      'color': '#CA0020'
    },
    {
      'min': 0.8,
      'max': 0.95,
      'color': '#F4A582'
    },
    {
      'min': 0.95,
      'max': 1.05,
      'color': '#F7F7F7'
    },
    {
      'min': 1.05,
      'max': 1.2,
      'color': '#92C5DE'
    }
  ],
  'Gender parity index at junior high school education': [
     {
      'min': 0.6,
      'max': 0.8,
      'color': '#CA0020'
    },
    {
      'min': 0.8,
      'max': 0.95,
      'color': '#F4A582'
    },
    {
      'min': 0.95,
      'max': 1.05,
      'color': '#F7F7F7'
    },
    {
      'min': 1.05,
      'max': 1.2,
      'color': '#92C5DE'
    },
    {
      'min': 1.2,
      'max': 1.6,
      'color': '#0571B0'
    }

  ]
}

var map, layer, geocoder;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var style = [ { stylers: [ { invert_lightness: true } ] },{ featureType: "road.highway", stylers: [ { hue: "#00e5ff" } ] },{ featureType: "poi.park", stylers: [ { visibility: "off" } ] },{ featureType: "landscape.natural", stylers: [ { visibility: "on" } ] },{ featureType: "water", stylers: [ { color: "#080808" } ] },{ featureType: "landscape.natural", stylers: [ { color: "#202020" } ] },{ featureType: "administrative.province", elementType: "labels", stylers: [ { visibility: "on" } ] },{ featureType: "administrative.locality", elementType: "labels", stylers: [ { visibility: "on" } ] },{ featureType: "administrative.country", elementType: "labels", stylers: [ { visibility: "off" } ] },{
  featureType: 'road',
  elementType: 'all',
  stylers: [
  { saturation: -99 }
  ]
  } ];

  geocoder = new google.maps.Geocoder();

  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');


  layer = new google.maps.FusionTablesLayer({
    query: {
      select: location_column,
      from: tableid
    }
  });
  layer.setMap(map);

  init_selectmenu();
  addStyle(getKey());


}



function getKey() {
  for(key in columns) {
    return key;
  }
}

// Initialize the drop-down menu
function init_selectmenu() {
  var selectmenu = document.getElementById('selector');
  for(column in columns) {
    var option = document.createElement('option');
    option.setAttribute('value', column);
    option.innerHTML = column;
    selectmenu.appendChild(option);
  }
}

function addStyle(column) {
  var defined_styles = columns[column];
  var styles = new Array();

  for(defined_style in defined_styles) {
    var style = defined_styles[defined_style];
    styles.push({
      where: generateWhere(column, style.min, style.max),
      polygonOptions: {
        fillColor: style.color,
        fillOpacity: 0.9,
        strokeOpacity: 0.50,
        strokeColor: "#f3f3f3"
      }
    });

  }

  layer.set('styles', styles);
  updateLegend(column);
}

// Create the where clause
function generateWhere(column_name, low, high) {
  var whereClause = new Array();
  whereClause.push("'");
  whereClause.push(column_name);
  whereClause.push("' >= ");
  whereClause.push(low);
  whereClause.push(" AND '");
  whereClause.push(column_name);
  whereClause.push("' < ");
  whereClause.push(high);
  return whereClause.join('');
}

// Create the legend with the corresponding colors
function updateLegend(column) {
  var legendDiv = document.createElement('div');
  var legend = new Legend(legendDiv, column);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_TOP].pop();
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legendDiv);
}

// Generate the content for the legend
function Legend(controlDiv, column) {
  controlDiv.style.padding = '10px';
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.width = legend_width;
  controlUI.title = 'Legend';
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';

  controlText.innerHTML = legendContent(column);
  controlUI.appendChild(controlText);
}

function legendContent(column) {
  var defined_styles = columns[column];

  // Generate the content for the legend using colors from object
  var controlTextList = new Array();
  controlTextList.push('<p><b>');
  controlTextList.push(column);
  controlTextList.push('</b></p>');
  for(defined_style in defined_styles) {
    var style = defined_styles[defined_style];
    controlTextList.push('<div style="background-color: ');
    controlTextList.push(style.color);
    controlTextList.push('; height: 20px; width: 20px; margin: 3px; float: left;"></div>');
    controlTextList.push(style.min);
    controlTextList.push(' to ');
    controlTextList.push(style.max);
    controlTextList.push('<br style="clear: both;"/>');
  }

  controlTextList.push('<br />');
  return controlTextList.join('');
}

</script>
</head>

<body onload="initialize();">

<select onchange="addStyle(this.value);" id="selector" style="font-size: 16px"></select>

<div id="map_canvas"></div>

                        </div>
    <script>
        // send the query string to the iFrame
        (function() {
            var interactive = jQ('#interactive iframe');
            if (interactive.length > 0) {
                var qs = window.location.search;
                interactive[0].src = interactive[0].src + qs;
            }
        })();
    </script>
</div>
            <div id="related">

</script>

</script>

</body>
</html>

【问题讨论】：

标签： styles layer google-fusion-tables

【解决方案1】：

只需在 initialize() 方法的末尾添加第二层：

function initialize() {
    // ... all the other stuff ...

    borderLayer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1_0rcifQnnNpLV1VjTPyzDZSF3LHp-7rowzrXM78'
        }
    });
    borderLayer.setMap(map);
}

参见your code with the second layer on jsFiddle 的工作示例。

【讨论】：

谢谢奥迪！这几乎是完美的，除了现在当我在下拉菜单中切换选项时边框消失了。
我明白了，样式覆盖了另一层。一个简单的解决方案是在每次更改地图时添加“边界层”。我更新了我的示例，因此每次调用addStyle() 函数时都会设置层（使用setBorderLayer()）：jsfiddle.net/odi86/K9EQQ
Odi 太好了，谢谢。不过还是有问题；在两个选项之间来回切换时，区域边界在切换了大约四次后突然消失了。知道是什么原因造成的以及如何解决吗？
啊，是的，我知道为什么，那里有一个小错误。您最多只能向地图添加五个图层，而我不小心在每次更改时添加了一个新的边界图层。现在代码已经修复，只创建了一个边框层。