1860


# Google Maps JavaScript API v3 を使用し、webサイトに地図を描画しデータに応じて地図を修飾しようとしています.

その際に、表題でも述べましたがDataLayerにjsのオブジェクトを直接渡して地図のデコレートを行ないたいと思っているのですが、

<https://developers.google.com/maps/documentation/javascript/datalayer>

この辺りを調べた限り、↓の様にデコレートの度にjsonを取得する方法しか今の所見つけられていません.

[code]

    map.data.loadGeoJson('https://example/a.json');
    map.data.loadGeoJson('https://example/b.json');
    
[/code]

地図のデコレートの度に通信が飛ぶ事を避けたく、取得したjsのオブジェクト（Json）を変数に格納して漸進的に描画＋その値を使い回す方法を探しています.

↓やりたい事のイメージはこんな感じです.

[code]

    $.get 'https://example/a.json', function(data) {
      map.data.何か(data.key1);
      console.log(data.key2);
      map.data.何か(data.key3);
    };
    
[/code]

よろしくお願い致します.


CC BY-SA 3.0
2014-12-17T01:11:39.523
1829
2015-02-22T01:05:54.257
2014-12-17T05:32:44.110
1024
3063
question
javascript bitmap google-maps
GoogleマップのData Layerにjsのオブジェクトを直接渡す方法を探しています


こんにちは

地図の装飾の処理内容によりますが、
[`addfeature`](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.AddFeatureEvent)
イベントが使えそうな気がします。

[code]

    map.data.addListener('addfeature', function(event) {
        // 何かする
        event.feature....
    });
    
[/code]

コールバック関数の引数である `event` 変数には
[`AddFeatureEvent`](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.AddFeatureEvent)
オブジェクトが来ます。


CC BY-SA 3.0
2014-12-17T04:29:15.530
1860
2014-12-17T04:29:15.530
2432
1829
answer


解決されたようですが、他にも方法があります。

  1. loadGeoJson には 第3引数があり、 ここに function(array_of_features) を設定できます。 この functionの中で ローカル変数に貯めておいて、随時 add/remove すればOKです。これが通常の方法かと思います。
[code]     var myFeatures = [];

    
    //...
    
    if (myFeatures.length === 0) {
        map.data.loadGeoJson('some.geojson', {}, function (arrf) {
            arrf.forEach(function(one) {
                myFeatures.push(one);
            });
        });
    } else {
        myFeatures.forEach(function(one) {
            map.data.add(one);
        });
    }
    
[/code]

  2. google maps api が "properで"(="標準機能として")実装される前の geoJson用コードを 使えば お望みのことがそのままできます。

  3. geoJsonでなく、topoJsonを使う場合は、$.getJson を使った方法で実装できます。<https://github.com/mbostock/topojson/wiki>
[code]     $.getJSON('some.topojson', function (data) {

            var geoJsonObject = topojson.feature(data, data.objects['some']);
             //geoJsonObject を使って何かする
    });
    
[/code]


CC BY-SA 3.0
2015-02-21T14:00:12.647
6868
2015-02-22T01:05:54.257
2015-02-22T01:05:54.257
8458
8458
1829
answer