即使遵循了Fusion Tables示例代碼，我的Fusion Tables也無法按照我想要的方式進行樣式設置。我究竟做錯了什么？

Question

我正在嘗試控制地圖的顏色，但是似乎不起作用。

我遵循了Google的示例代碼，但無濟於事。 我的代碼如下。 嘗試為地圖添加樣式的嘗試從第132行開始。注釋對我來說只是有用的提示，因為我剛開始使用JavaScript和Fusion Tables API。

    <!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:800px; height:600px; }
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer;

     var cz = {
    center: new google.maps.LatLng(40, -95),
        zoom: 4 
     };

     var locationColumn = 'geometry';
     var tableRegion = 4437529;

     var mapStyle = [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [
            { saturation: 99 }
          ]
        },
        {
          featureType: 'road.highway',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.arterial',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.country',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.locality',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.neighborhood',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.land_parcel',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'poi',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'transit',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ];

     var map_options = {
      center: cz["center"], //Accesses the 'center' property of the 'cz' object
      zoom: cz["zoom"], //Accesses the 'zoom' property of the 'cz' object
      mapTypeId: google.maps.MapTypeId.ROADMAP, //Type of map.
      zoomControlOptions: { //control options for the 'zoom' action of Google Maps
        style: google.maps.ZoomControlStyle.SMALL, //Makes the zoom function on the upper-left-side of Google Maps small -- instead of a scale-like thing, it's just a plus and minus
        position: google.maps.ControlPosition.LEFT_CENTER //Puts Zoom function center-left
      },
      streetViewControl: false, //Turns off Street View option
      panControl: false, //turns off the circular pan button in nupper-left
      mapTypeControl: false //Turns off 'MAP/SATELLITE' option in upper-right
    }; 

     var locationQuery = {
      select: locationColumn,
          from: tableRegion
     };


     function initialize() {
      //new Google Map with the 'map_options' 
      map = new google.maps.Map(document.getElementById('map-canvas'), map_options);

      //Styles the map so it removes roads, saturates things, etc. See 'mapStyle'
      var style = mapStyle;
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style'); 

      //Makes the Fusion Tables layer, querying the polygon location info
      layer = new google.maps.FusionTablesLayer({
        query: locationQuery,

    //Here's where I try setting the colors and conditions for my map. Doesn't work.
    styles: [{
      polygonOptions: {
        fillColor: "#FFFFFF",
        fillOpacity: 0.5
      }
    },{
      where: "price > 200",
      polygonOptions: {
        fillColor: "#FFFF00",
        fillOpacity: 0.5
      }
    }]
      });
      layer.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

您沒有說明您的確切問題是什么，除了它沒有用。 不是很有幫助。 所以我猜。 您的地圖對我來說很好。 沒問題。 嘗試在下面的代碼中設置fillOpacity：1，以確保其工作正常。 通過使用.5，您可以將基礎地圖顏色與FT圖層顏色混合。

styles: [{
      polygonOptions: {
        fillColor: "#FFFFFF",
        fillOpacity: 0.5
      }
    },{
      where: "price > 200",
      polygonOptions: {
        fillColor: "#FFFF00",
        fillOpacity: 0.5
      }
    }]

Answer 2

FusionTables可能存在問題。 當我嘗試在本地運行副本時，它對我也不起作用（我得到了令人恐懼的“數據可能仍在加載，拖動或刷新頁面以查找結果”的圖塊），它起作用了，但是后來在本地也起作用了。

即使遵循了Fusion Tables示例代碼，我的Fusion Tables也無法按照我想要的方式進行樣式設置。我究竟做錯了什么？

問題描述

2 個解決方案

解決方案1
0 2012-06-30 10:54:26

解決方案2
0 已采納 2012-06-30 18:59:44

即使遵循了Fusion Tables示例代碼，我的Fusion Tables也無法按照我想要的方式進行樣式設置。 我究竟做錯了什么？

問題描述

2 個解決方案

解決方案1 0 2012-06-30 10:54:26

解決方案2 0 已采納 2012-06-30 18:59:44

即使遵循了Fusion Tables示例代碼，我的Fusion Tables也無法按照我想要的方式進行樣式設置。我究竟做錯了什么？

解決方案1
0 2012-06-30 10:54:26

解決方案2
0 已采納 2012-06-30 18:59:44