Question

我正在尝试控制地图的颜色，但似乎没有效果。

我跟着Google's sample code，但无济于事。我的代码如下。地图样式的尝试从第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可能存在问题。当我尝试在本地运行它时，它对我来说不起作用（我得到了可怕的“数据可能正在加载，拖动或刷新页面以找出”的磁贴），当我终于到达{{3}时它起作用了，但它也在本地工作。

即使我遵循Fusion Tables示例代码，我的Fusion Tables也不会按照我希望的方式进行设置。我究竟做错了什么？

2 个答案: