Google Map JavaScript APIでマップを表示中に、GeoJSONの2つの図形データをロードする処理を行なっております。
図形データ自体は正しく読み取れるのですが、polylineの色が同じなので別々にしようと設定を入れてもうまくいきません。
おそらく最後に読み取った設置値の色が全体で表示になっている思うのですが、どうやって別々に読み込ませて、別々の色を設定するかがわかりません。
setTimeout(function() { map.data.loadGeoJson('A33-20_27Polygon.geojson'); //データ1 // スタイルの設定 map.data.setStyle(function(feature) { if (feature.getProperty('type') === 'polyline') { // ポリラインのスタイル return ({ strokeColor: '#1408ff', fillColor: '#1408ff', strokeWeight: 1, clickable: true, zIndex: 1 }); } }); }, 1000); setTimeout(function() { map.data.loadGeoJson('A48-20_27.geojson'); //データ2 // スタイルの設定 map.data.setStyle(function(feature) { if (feature.getProperty('type') === 'polyline') { // ポリラインのスタイル return ({ strokeColor: '#1cdbfc', fillColor: '#1cdbfc', strokeWeight: 1, clickable: true, zIndex: 1 }); } }); }, 1000);
尚、下記のように試みましたらエラーとなってしまいました。
let data1 = map.data.loadGeoJson('A33-20_27Polygon.geojson'); data1.setStyle(function(feature) { 中身は省略 } let data2 = map.data.loadGeoJson('A48-20_27.geojson'); data2.setStyle(function(feature) { 中身は省略 }
尚、下記で取得をしたデータをコンソールで表示させる場合はどのようにコードを書けば大丈夫でしょうか。(console.logだとエラーが出ました)
map.data.loadGeoJson('A48-20_27.geojson');
あなたの回答
tips
プレビュー