Google Maps APIとGeoJSON

GeoJSONとGoogle Maps APIに問題があります。私はとMultiLineStringの...
1）各行持つそれ自身の色と
2）をプロットするにはどうすればよい
各行持つそれ自身の性質と
3）各ラインはクリック可能、それはだと情報ウィンドウを表示する必要がありますプロパティ

サンプルJavascriptを：ユーザがロードやマップ内のキーをアンロードすることができますよう
Google Maps APIとGeoJSON

var dataGEOJSON=[]; 
function LoadMyGEOJSON(key) 
{ 
    dataGEOJSON[key] = new google.maps.Data(); 
    dataGEOJSON[key].loadGeoJson('GetLatLngGEOJSON.aspx?key=' + key); 
    dataGEOJSON[key].setMap(map); 
}

アレイの理由は、私は彼らがロードされたキーを追跡することができる方法です。 t後継ユーザーインターフェース。

サンプルにGeoJSON：

{ 
    "type":"FeatureCollection", 
    "features":[ 
     { 
     "type":"Feature", 
     "properties":{ 
      "Key":"007", 
      "Line1":"<this is line 1 desc>", 
      "Line2":"<this is line 2 desc>", 
      "Line3":"<this is line 3 desc>", 
      "Line4":"<this is line 4 desc>", 
      "Line5":"<this is line 5 desc>", 
      "Line6":"<this is line 6 desc>", 
      "Line7":"<this is line 7 desc>" 
     }, 
     "geometry":{ 
      "type":"MultiLineString", 
      "coordinates":[ 
       [ 
        [ 
        -79.7066775992172, 
        43.6462189758028 
        ], 
        [ 
        -79.7066939830514, 
        43.6461985074393 
        ], 
        [ 
        -79.7066378408013, 
        43.6461605607267 
        ], 
        [ 
        -79.7066097743239, 
        43.6461403201406 
        ], 
        [ 
        -79.7064548987452, 
        43.6460566901385 
        ], 
        [ 
        -79.7063956692058, 
        43.6460219372408 
        ] 
       ], 
       [ 
        [ 
        -79.7063956692058, 
        43.6460219372408 
        ], 
        [ 
        -79.7063852230813, 
        43.646033518772 
        ], 
        [ 
        -79.7063166536656, 
        43.6461172032157 
        ], 
        [ 
        -79.7064079964431, 
        43.6461815121163 
        ], 
        [ 
        -79.7060589374119, 
        43.646518038823 
        ], 
        [ 
        -79.7060054211382, 
        43.6465600820263 
        ] 
       ], 
       [ 
        [ 
        -79.7060054211382, 
        43.6465600820263 
        ], 
        [ 
        -79.7052588394648, 
        43.6471387374653 
        ], 
        [ 
        -79.7048261689477, 
        43.6474817773536 
        ], 
        [ 
        -79.7043239742464, 
        43.6474733374216 
        ], 
        [ 
        -79.7041128202014, 
        43.6476608859429 
        ], 
        [ 
        -79.703901284037, 
        43.6478509811517 
        ], 
        [ 
        -79.7030237720306, 
        43.6486568653637 
        ], 
        [ 
        -79.7029267563095, 
        43.6486965678914 
        ] 
       ], 
       [ 
        [ 
        -79.7029267563091, 
        43.6486965678909 
        ], 
        [ 
        -79.7028702942784, 
        43.6487267896104 
        ], 
        [ 
        -79.7028019515802, 
        43.6487884267869 
        ] 
       ], 
       [ 
        [ 
        -79.6949803205847, 
        43.6554816862022 
        ], 
        [ 
        -79.6946328513629, 
        43.6552226727517 
        ], 
        [ 
        -79.6945439505269, 
        43.6551559442016 
        ] 
       ], 
       [ 
        [ 
        -79.6945439505269, 
        43.6551559442016 
        ], 
        [ 
        -79.694066895687, 
        43.654797865403 
        ], 
        [ 
        -79.6934193769725, 
        43.6543136334174 
        ], 
        [ 
        -79.6924271403494, 
        43.6535711706703 
        ], 
        [ 
        -79.6920107752268, 
        43.6532605761111 
        ], 
        [ 
        -79.6919943721596, 
        43.6532604342567 
        ] 
       ], 
       [ 
        [ 
        -79.6919943721591, 
        43.6532604342562 
        ], 
        [ 
        -79.6914713751595, 
        43.6536247980162 
        ], 
        [ 
        -79.6911279733848, 
        43.6533992300817 
        ] 
       ], 
       [ 
        [ 
        -79.6959960003114, 
        43.6400049378117 
        ], 
        [ 
        -79.6960571265341, 
        43.6400850012767 
        ], 
        [ 
        -79.6961629127738, 
        43.640012603549 
        ], 
        [ 
        -79.6962380127401, 
        43.6399612066507 
        ], 
        [ 
        -79.6964991971409, 
        43.6401581219518 
        ], 
        [ 
        -79.6965504313169, 
        43.6403222661559 
        ] 
       ], 
       [ 
        [ 
        -79.6965504313164, 
        43.6403222661554 
        ], 
        [ 
        -79.6963411179014, 
        43.6405181683405 
        ] 
       ], 
       [ 
        [ 
        -79.6973635087052, 
        43.6393434514529 
        ], 
        [ 
        -79.6975152035274, 
        43.6394534198075 
        ], 
        [ 
        -79.6974394413309, 
        43.6393984974797 
        ], 
        [ 
        -79.6977214702725, 
        43.6396029481089 
        ] 
       ], 
       [ 
        [ 
        -79.7037279098659, 
        43.6441816734685 
        ], 
        [ 
        -79.7038116627627, 
        43.6442425378655 
        ], 
        [ 
        -79.7043663390943, 
        43.6446488071586 
        ], 
        [ 
        -79.7048680167224, 
        43.645024186195 
        ], 
        [ 
        -79.7053904212546, 
        43.6454260322038 
        ], 
        [ 
        -79.7059251921243, 
        43.6458354437457 
        ], 
        [ 
        -79.7065612964782, 
        43.6461582999466 
        ], 
        [ 
        -79.7065835802603, 
        43.6461492141531 
        ], 
        [ 
        -79.7066775992172, 
        43.6462189758028 
        ] 
       ], 
       [ 
        [ 
        -79.6973112420145, 
        43.6393143090171 
        ], 
        [ 
        -79.6972862146857, 
        43.6393319663604 
        ], 
        [ 
        -79.6971872210635, 
        43.6392588377729 
        ], 
        [ 
        -79.6968127129063, 
        43.6395272639245 
        ], 
        [ 
        -79.6966669835105, 
        43.6395263250713 
        ], 
        [ 
        -79.6960609039152, 
        43.6399594999986 
        ] 
       ], 
       [ 
        [ 
        -79.6960609039152, 
        43.6399594999986 
        ], 
        [ 
        -79.6960181044663, 
        43.639990047741 
        ] 
       ], 
       [ 
        [ 
        -79.7032573776668, 
        43.6438035217788 
        ], 
        [ 
        -79.7032773647046, 
        43.6438182749637 
        ], 
        [ 
        -79.7032968727787, 
        43.6438287137889 
        ] 
       ], 
       [ 
        [ 
        -79.6982280590368, 
        43.6399996458065 
        ], 
        [ 
        -79.6983123840689, 
        43.6400655275078 
        ], 
        [ 
        -79.6988209765837, 
        43.6404574862051 
        ], 
        [ 
        -79.6997681798983, 
        43.6411574341786 
        ], 
        [ 
        -79.699722618622, 
        43.6411857721075 
        ], 
        [ 
        -79.7003863588722, 
        43.641677233397 
        ], 
        [ 
        -79.7008842734269, 
        43.6420484764154 
        ], 
        [ 
        -79.7014070294285, 
        43.6424381587765 
        ], 
        [ 
        -79.7024395226368, 
        43.754341 
        ], 
        [ 
        -79.7029823771679, 
        43.643602976107 
        ], 
        [ 
        -79.7032573776668, 
        43.6438035217788 
        ] 
       ] 
      ] 
     } 
     } 
    ] 
}

これは私がにGeoJSONを使用しています初めてですので、私はプロパティおよびスタイルを追加するために必要にGeoJSON形式の支援が必要になります。さらに、javascriptとGoogle Map APIコード。詳細な例を示すリソースへのコードやリンクを誰かが提供できる場合は、大いに感謝します。

出典

2016-03-22 Nilesh Barai

[線を描く方法]（https://developers.google.com/maps/documentation/javascript/shapes）のGoogleのガイドをご覧ください。 #polylines）と[infowindowsを追加する方法]（https://developers.google.com/maps/documentation/javascript/infowindows） – duncan

いくつかのポリラインを作成しました。問題なく動作しますが、データをロードするときGeoJSON（URL）から、MutliLineStringを私のために描画しますが、スタイリングまたはプロパティパーツをどのように動作させるのですか？ –

GeoJSONがロードされたときに処理するオプションが1つあり、行の各セクションからオブジェクトgoogle.maps.Polylineが作成されます。ポリラインセグメントの最初の点に情報ウィンドウの位置を設定し、（などthis questionの回答中のマーカーのために使用される関数クロージャを使用

proof of concept fiddle

コードスニペット：

var colors = ["#FF0000", "#800000", "#00FF00", "#008000", "#0000FF", " \t #8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#000080", "#FFFF00", "#808000", "#FF00FF", "#800080", "#00FFFF", "#7FFFD4", "#008080", "#000000"]; 
 

 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    // Create a simple map. 
 
    features = []; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 14, 
 
    center: { 
 
     lat: 43.65, 
 
     lng: -79.7 
 
    } 
 
    }); 
 

 
    // process the loaded GeoJSON data. 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    google.maps.event.addListener(map.data, 'addfeature', function(e) { 
 
    if (e.feature.getGeometry().getType() === 'MultiLineString') { 
 
     var polys = e.feature.getGeometry().getArray(); 
 
     for (var i = 0; i < polys.length; i++) { 
 
     for (var j = 0; j < polys[i].getLength(); j++) { 
 
      var poly = new google.maps.Polyline({ 
 
      map: map, 
 
      path: polys[i].getArray(), 
 
      strokeColor: colors[i % colors.length] 
 
      }); 
 
      google.maps.event.addListener(poly, 'click', (function(poly, i, feature) { 
 
      return function() { 
 
       infowindow.setContent("polyline " + i+"<br>"+feature.getProperty("Line"+i)); 
 
       infowindow.setPosition(polys[i].getAt(0)); 
 
       infowindow.open(map); 
 
      } 
 
      })(poly, i, e.feature)); 
 
      bounds.extend(polys[i].getAt(j)); 
 
     } 
 
     } 
 
     map.fitBounds(bounds); 
 
     map.data.setMap(null); 
 
    } else if (e.feature.getGeometry().getType() === 'GeometryCollection') { 
 
     var polys = e.feature.getGeometry().getArray(); 
 
     for (var i = 0; i < polys.length; i++) { 
 
     for (var j = 0; j < polys[i].getLength(); j++) { 
 
      bounds.extend(polys[i].getAt(j)); 
 
     } 
 
     } 
 
     map.fitBounds(bounds); 
 
    } 
 
    }); 
 
    map.data.addGeoJson(data); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var data = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "Key": "007", 
 
     "Line1": "&lt;this is line 1 desc&gt;", 
 
     "Line2": "&lt;this is line 2 desc&gt;", 
 
     "Line3": "&lt;this is line 3 desc&gt;", 
 
     "Line4": "&lt;this is line 4 desc&gt;", 
 
     "Line5": "&lt;this is line 5 desc&gt;", 
 
     "Line6": "&lt;this is line 6 desc&gt;", 
 
     "Line7": "&lt;this is line 7 desc&gt;" 
 
    }, 
 
    "geometry": { 
 
     "type": "MultiLineString", 
 
     "coordinates": [ 
 
     [ 
 
      [-79.7066775992172, 
 
      43.6462189758028 
 
      ], 
 
      [-79.7066939830514, 
 
      43.6461985074393 
 
      ], 
 
      [-79.7066378408013, 
 
      43.6461605607267 
 
      ], 
 
      [-79.7066097743239, 
 
      43.6461403201406 
 
      ], 
 
      [-79.7064548987452, 
 
      43.6460566901385 
 
      ], 
 
      [-79.7063956692058, 
 
      43.6460219372408 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.7063956692058, 
 
      43.6460219372408 
 
      ], 
 
      [-79.7063852230813, 
 
      43.646033518772 
 
      ], 
 
      [-79.7063166536656, 
 
      43.6461172032157 
 
      ], 
 
      [-79.7064079964431, 
 
      43.6461815121163 
 
      ], 
 
      [-79.7060589374119, 
 
      43.646518038823 
 
      ], 
 
      [-79.7060054211382, 
 
      43.6465600820263 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.7060054211382, 
 
      43.6465600820263 
 
      ], 
 
      [-79.7052588394648, 
 
      43.6471387374653 
 
      ], 
 
      [-79.7048261689477, 
 
      43.6474817773536 
 
      ], 
 
      [-79.7043239742464, 
 
      43.6474733374216 
 
      ], 
 
      [-79.7041128202014, 
 
      43.6476608859429 
 
      ], 
 
      [-79.703901284037, 
 
      43.6478509811517 
 
      ], 
 
      [-79.7030237720306, 
 
      43.6486568653637 
 
      ], 
 
      [-79.7029267563095, 
 
      43.6486965678914 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.7029267563091, 
 
      43.6486965678909 
 
      ], 
 
      [-79.7028702942784, 
 
      43.6487267896104 
 
      ], 
 
      [-79.7028019515802, 
 
      43.6487884267869 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6949803205847, 
 
      43.6554816862022 
 
      ], 
 
      [-79.6946328513629, 
 
      43.6552226727517 
 
      ], 
 
      [-79.6945439505269, 
 
      43.6551559442016 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6945439505269, 
 
      43.6551559442016 
 
      ], 
 
      [-79.694066895687, 
 
      43.654797865403 
 
      ], 
 
      [-79.6934193769725, 
 
      43.6543136334174 
 
      ], 
 
      [-79.6924271403494, 
 
      43.6535711706703 
 
      ], 
 
      [-79.6920107752268, 
 
      43.6532605761111 
 
      ], 
 
      [-79.6919943721596, 
 
      43.6532604342567 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6919943721591, 
 
      43.6532604342562 
 
      ], 
 
      [-79.6914713751595, 
 
      43.6536247980162 
 
      ], 
 
      [-79.6911279733848, 
 
      43.6533992300817 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6959960003114, 
 
      43.6400049378117 
 
      ], 
 
      [-79.6960571265341, 
 
      43.6400850012767 
 
      ], 
 
      [-79.6961629127738, 
 
      43.640012603549 
 
      ], 
 
      [-79.6962380127401, 
 
      43.6399612066507 
 
      ], 
 
      [-79.6964991971409, 
 
      43.6401581219518 
 
      ], 
 
      [-79.6965504313169, 
 
      43.6403222661559 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6965504313164, 
 
      43.6403222661554 
 
      ], 
 
      [-79.6963411179014, 
 
      43.6405181683405 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6973635087052, 
 
      43.6393434514529 
 
      ], 
 
      [-79.6975152035274, 
 
      43.6394534198075 
 
      ], 
 
      [-79.6974394413309, 
 
      43.6393984974797 
 
      ], 
 
      [-79.6977214702725, 
 
      43.6396029481089 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.7037279098659, 
 
      43.6441816734685 
 
      ], 
 
      [-79.7038116627627, 
 
      43.6442425378655 
 
      ], 
 
      [-79.7043663390943, 
 
      43.6446488071586 
 
      ], 
 
      [-79.7048680167224, 
 
      43.645024186195 
 
      ], 
 
      [-79.7053904212546, 
 
      43.6454260322038 
 
      ], 
 
      [-79.7059251921243, 
 
      43.6458354437457 
 
      ], 
 
      [-79.7065612964782, 
 
      43.6461582999466 
 
      ], 
 
      [-79.7065835802603, 
 
      43.6461492141531 
 
      ], 
 
      [-79.7066775992172, 
 
      43.6462189758028 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6973112420145, 
 
      43.6393143090171 
 
      ], 
 
      [-79.6972862146857, 
 
      43.6393319663604 
 
      ], 
 
      [-79.6971872210635, 
 
      43.6392588377729 
 
      ], 
 
      [-79.6968127129063, 
 
      43.6395272639245 
 
      ], 
 
      [-79.6966669835105, 
 
      43.6395263250713 
 
      ], 
 
      [-79.6960609039152, 
 
      43.6399594999986 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6960609039152, 
 
      43.6399594999986 
 
      ], 
 
      [-79.6960181044663, 
 
      43.639990047741 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.7032573776668, 
 
      43.6438035217788 
 
      ], 
 
      [-79.7032773647046, 
 
      43.6438182749637 
 
      ], 
 
      [-79.7032968727787, 
 
      43.6438287137889 
 
      ] 
 
     ], 
 
     [ 
 
      [-79.6982280590368, 
 
      43.6399996458065 
 
      ], 
 
      [-79.6983123840689, 
 
      43.6400655275078 
 
      ], 
 
      [-79.6988209765837, 
 
      43.6404574862051 
 
      ], 
 
      [-79.6997681798983, 
 
      43.6411574341786 
 
      ], 
 
      [-79.699722618622, 
 
      43.6411857721075 
 
      ], 
 
      [-79.7003863588722, 
 
      43.641677233397 
 
      ], 
 
      [-79.7008842734269, 
 
      43.6420484764154 
 
      ], 
 
      [-79.7014070294285, 
 
      43.6424381587765 
 
      ], 
 
      [-79.7024395226368, 
 
      43.754341 
 
      ], 
 
      [-79.7029823771679, 
 
      43.643602976107 
 
      ], 
 
      [-79.7032573776668, 
 
      43.6438035217788 
 
      ] 
 
     ] 
 
     ] 
 
    } 
 
    }] 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

出典

2016-03-23 03:04:11 geocodezip

Thx、これは素晴らしい例でした:) –

Google Maps APIとGeoJSON

答えて

関連する問題