0

マップの色を制御しようとしていますが、機能していないようです。

私はグーグルのサンプルコードに従ったが、役に立たなかった。私のコードは以下の通りです。マップのスタイルを設定する試みは132行目から始まります。JavaScriptとFusionTablesAPIに足を踏み入れているだけなので、コメントは私にとって役立つヒントにすぎません。

    <!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

あなたはそれが機能していないことを除いてあなたの正確な問題が何であるかを述べていません。 あまり役に立ちません。だから私は推測しています。あなたの地図は私にとってうまくいきました。問題はありません。以下のコードでfillOpacity：1を設定して、正常に機能していることを確認してください。.5を使用すると、ベースマップの色をFTレイヤーの色とブレンドできます。

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

FusionTablesに問題があった可能性があります。ローカルで実行しようとしても機能しませんでした（「データがまだロードされている可能性があります。ページをドラッグまたは更新して確認してください」という恐ろしいタイルを取得しました）、ついにコピーのアップロードに取り掛かりました。それは機能しましたが、ローカルでも機能しました。

于 2012-06-30T18:59:44.830 に答える