3

下の地図でグラデーションが機能しない理由を誰かが説明できますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Riks.txt - Google Fusion Tables</title>
<style type="text/css">
 html, body, #map_canvas {
   margin: 0;
   padding: 0;
   height: 100%;
 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.7&amp;sensor=false">

</script>
<script type="text/javascript">
function initialize() 
{
  map = new google.maps.Map
  (document.getElementById('map_canvas'), 
  {
    center: new google.maps.LatLng(59.53726545292721,18.12209266712103),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "MP",
      from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
      where: ""
    },

styles: [
  {
    styleId: 2,
    polygonOptions: {
      fillOpacity: 1,
      fillColorStyler: {
        expression: "MP",
        min: 0,
        max: 100,
        gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
      },
      strokeWeight: 1,
      strokeOpacity: 0.3,
      strokeColor: '#000000'
    }
  }
]

});



  layer.setOptions({
    styleId: 2,
    templateId: 0
  });
}

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

3 に答える 3

2

グラデーションを動的に適用するための構文が見つかりませんでした (どこから例がありますか?)。Fusion Tables によって返されるスタイルの説明がありますが、返されるスタイルの構文は機能していないようです。私の推測では、それは (まだ?) 不可能です。

ただし、これを動的に行うことが重要でない場合は、Fusion Tables Web UI でグラデーションを定義できます。

Fusion Tables Web UI でマップ スタイルを定義する

複数のスタイルを作成する場合は、複数のマップを追加できます。そのためには、新しい外観への切り替えに切り替える必要があります (Web UI の右上隅にある「新しい外観に切り替える」のリンクを参照してください)。次に、「+」ボタンを使用して新しいマップを追加できます。

フュージョン テーブルに別のマップを追加する

Web UI で必要なすべてのスタイルを指定した場合は、そのように FusionTablesLayer でそれらの使用を開始できます(それをテストするためにテーブルのコピーを作成しました)。

layer = new google.maps.FusionTablesLayer({
    map: map,
    query: {
        select: "MP",
        from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
        where: ""
    },
    styleId: 2
});

styleId1 がデフォルトで、2 は最初に追加したもの、3 は 2 番目などです。コピーしたテーブルに 2 つのスタイルを作成しました。

試すための jsFiddle の例を次に示します: http://jsfiddle.net/odi86/gPjE3/

styleId: 2(gradient on column MP) をstyleId: 3(gradient on column ) に変更するだけMで、何が起こるかを確認できます。

これが役立つことを願っています。

于 2012-08-09T14:16:50.603 に答える
1

サポートされているスタイル マップの小さなサブセットのみが、Maps API を介して動的に設定されます。FusionTablesPolygonOptions については、Maps API ドキュメントを参照してください。

指定したスタイルを実現するには:

  • フュージョン テーブル インターフェースのマップ ビジュアライゼーションで必要なスタイルを設定します
  • styleIdFusion Tables から保存された を取得します。API Explorerを使用して、保存されているすべてのスタイルを取得します。
  • を参照して、Maps API を使用して目的のスタイルを設定します。styleId

API の使用例

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "MP",
    from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
    where: ""
  },
  styleId: 3
});
于 2012-08-09T14:40:14.487 に答える
0

ヒート マップ (Goog Drive の既定のスタイラーを使用する必要があります) を作成していないと仮定すると、正しい方法は、クエリによって独自のグラデーションを手動で作成することです。

初期化内...プレーンなfusionlayerを作成します

var fusionlayer = new google.maps.FusionTablesLayer({
    query: {
        select: '*',
        from: tableID
    }
});

スタイラーを関数に配置することを好みます。これは、グラデーション化するデータのさまざまな列を呼び出す可能性があるためです。

function changeMap(tableValue) { 
    var newStyle = [
    {
      where: tableValue + "< 0.01",
      polygonOptions: {
        fillColor: "#CCCCCC",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.01 AND" + tableValue + "< 0.05",
      polygonOptions: {
        fillColor: "#fefb8c",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + " >= 0.05 AND" + tableValue + "< 0.10",
      polygonOptions: {
        fillColor: "#ff9233",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.10",
      polygonOptions: {
        fillColor: "#800000",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }];

    fusionLayer.setOptions({
      'styles': newStyle,
    });
};

必要に応じて、以上のクエリと色をカスタマイズします。

マップを「クリア」するリセット機能もあります。これは、マップの視覚的な外観を変更するだけであるため、多くの場合重要ではありません。

function defaultMap() { 
    fusionlayer.setOptions({
      'styles': [{ 
          polygonOptions: {
            fillColor: "#cccccc",
            strokeColor: "#dddddd",
            strokeWeight: 0
          }     
        }],
    });

    }
于 2012-11-25T21:53:34.777 に答える