3

これは以下の私のコードです。何らかの理由で、適切にレンダリングされる唯一のスタイルは、ストローク (白) と不透明度 (0.4 に設定) です。ただし、グラデーションが読み込まれないようです。代わりに、それはすべて赤です。どうしてこれなの？

<html>
<head>
    <meta charset="UTF-8">

    <title>Customizing Fusion Tables map using Fusion Tables' Javascript API</title>

    <style type="text/css">
        #map-canvas {
            height: 800px;
            width: 800px;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps API -->
    <script type="text/javascript">
        var locationColumn = "geometry";
        var tableId = "1FbzvoRkdJzXvIxMJg2mGYVz5Q1BW2-4feMolgVc"; // California Census Tracts FT
        var condition = "'Median income (dollars)'>0";

        var mapOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        function initialize() {
            var geocoder = new google.maps.Geocoder();
            var gmap = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            var layer = new google.maps.FusionTablesLayer({
                query: {
                    select: locationColumn,
                    from: tableId,
                    where: condition
                },
                styles: [
                    {
                        polygonOptions: {
                            strokeColor: "#ffffff",
                            strokeOpacity: 0.4,
                            strokeWeight: 1,

                            fillColorStyler: {
                                kind: "fusiontables#gradient",
                                columnName: "Median income (dollars)",

                                gradient: {
                                    min: 28183.65,
                                    max: 122762.9,
                                    colors: [
                                        {
                                            color:"#990000",
                                            opacity:0.4
                                        },
                                        {
                                            color:"ffd966",
                                            opacity:0.4
                                        },
                                        {
                                            color:"#274e13",
                                            opacity:0.4
                                        }
                                    ]
                                }
                            }
                        }
                    }
                ]
            });

            geocoder.geocode(
                {
                    'address':'California'
                },
                function(results,status){
                    var sw = results[0].geometry.viewport.getSouthWest();
                    var ne = results[0].geometry.viewport.getNorthEast();
                    var bounds = new google.maps.LatLngBounds(sw,ne);
                    gmap.fitBounds(bounds)
                }
            );

            layer.setMap(gmap);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>
4

1 に答える 1

2

更新 1

さらに調査を行いました。残念ながら、この機能はサポートされていません。あなたのコードにはドキュメントnew google.maps.FusionTablesLayerがあり、グラデーションについては言及されていません。最後のソリューション (うまく機能します) またはグラデーションをサポートするビジネス人口統計層を使用することをお勧めします。ここでも同じ結論に達しました: Fusion Table Layer のグラデーション。ですから、あなたの質問に答えるには: いいえ、Google マップの JavaScript ベースの API を使用してグラデーションを作成することはできません。

更新 0

Google Maps JavaScript API v3: Layersを使用して、目的のグラデーションを実現できました。具体的には、 Fusion Table Stylesサブセクションで役立つ例を見つけました。

作業例: http://jsbin.com/alahup/1/edit

関連コード

var layer = new google.maps.FusionTablesLayer({
  query: {
      select: locationColumn,
      from: tableId,
      where: condition
  },
  styles: [{
      where: "'Median income (dollars)' < 35000",
      polygonOptions: {
          fillColor: '#2EFEF7',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 34999.99 AND 'Median income (dollars)' < 65000",
      polygonOptions: {
          fillColor: '#2E9AFE',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 64999.99 AND 'Median income (dollars)' < 120000",
      polygonOptions: {
          fillColor: '#2E2EFE',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 119999.99",
      polygonOptions: {
          fillColor: '#0B0B61',
          fillOpacity: 0.4
      }
  }]
});

結果

フュージョン テーブル グラデーションの例

簡単な解決策は次のとおりです。

var layer = new google.maps.FusionTablesLayer({
            query: {
                select: locationColumn,
                from: tableId,
                where: condition
            },
            styleId: 2 // <-- replace current style code with this
 });

フュージョン テーブル レイヤーのグラデーションには、定義済みのスタイルに関する詳細情報が含まれています。私はそれをさらに調べます。

また、Google によるこの例は、達成しようとしているものとほぼ同じように見えます。私はそれらのコードを確認して使用します。

https://developers.google.com/fusiontables/docs/samples/adv_fusiontables

ここに画像の説明を入力

于 2012-12-14T23:52:54.480 に答える