0

我试图控制我的地图是什么颜色，但它似乎不起作用。

我按照谷歌的示例代码，但无济于事。我的代码如下。设置地图样式的尝试从第 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>
4

2 回答 2

0

FusionTables 可能存在问题。当我尝试在本地运行它时（我得到了带有可怕的“数据可能仍在加载，拖动或刷新页面以找出答案”的图块），当我终于开始上传副本时，它也对我不起作用，它起作用了，但后来它在本地也起作用了。

于 2012-06-30T18:59:44.830 回答
0

你没有说明你的确切问题是什么，除了它不起作用。 不是很有帮助。所以我猜。你的地图对我来说很好用。没问题。尝试在下面的代码中设置 fillOpacity: 1 以查看它是否正常工作。通过使用 0.5，您允许底图颜色与 FT 图层颜色混合。

styles: [{
      polygonOptions: {
        fillColor: "#FFFFFF",
        fillOpacity: 0.5
      }
    },{
      where: "price > 200",
      polygonOptions: {
        fillColor: "#FFFF00",
        fillOpacity: 0.5
      }
    }]
于 2012-06-30T10:54:26.203 回答