2017-04-05 7 views
1

GeoJsonデータに問題があります。次のGeoJsonデータをGoogleマップにインポートできない理由

data= {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"letter":"f"},"geometry":{"type":"Polygon","coordinates":[[[-0.467823,51.8881],[-0.461189,51.883591],[-0.45952,51.882457],[-0.4584,51.881558],[-0.455638,51.87973],[-0.453644,51.879704],[-0.447352,51.879806],[-0.442062,51.879798],[-0.439082,51.879388],[-0.435922,51.878419],[-0.433059,51.877516],[-0.430189,51.876799],[-0.427409,51.876391],[-0.424125,51.8761],[-0.420636,51.875991],[-0.419732,51.876164],[-0.41987,51.877772],[-0.41932,51.879371],[-0.418517,51.879484],[-0.417789,51.880339],[-0.415227,51.88222],[-0.419205,51.882644],[-0.426901,51.885218],[-0.428296,51.886369],[-0.429248,51.885188],[-0.431001,51.885025],[-0.431131,51.884162],[-0.431451,51.883549],[-0.434041,51.883707],[-0.435319,51.88428],[-0.438299,51.88469],[-0.440777,51.885217],[-0.443263,51.885497],[-0.445256,51.885585],[-0.446127,51.8864],[-0.44839,51.887356],[-0.449782,51.887498],[-0.455175,51.887446],[-0.458568,51.88749],[-0.462862,51.887423],[-0.465357,51.887455],[-0.467487,51.888167]]]}}]} 

map.data.addGeoJson(data);と追加します。以下のエラーが表示されます。 enter image description here

ありがとうございます。

答えて

3

私は(Chromeで)得るエラーは次のとおりです。プロパティで

「機能」:プロパティで「幾何学」:最初と最後の位置:インデックス0:プロパティ「座標」のインデックス0で等しくない

(最初の点をコピーして配列の最後に追加することで)ポリゴンを表示します。

fiddle

screenshot of resulting map

コードスニペット:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51.883707, -0.434041), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    map.data.addGeoJson(data); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var data = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "letter": "f" 
 
    }, 
 
    "geometry": { 
 
     "type": "Polygon", 
 
     "coordinates": [ 
 
     [ 
 
      [-0.467823, 51.8881], 
 
      [-0.461189, 51.883591], 
 
      [-0.45952, 51.882457], 
 
      [-0.4584, 51.881558], 
 
      [-0.455638, 51.87973], 
 
      [-0.453644, 51.879704], 
 
      [-0.447352, 51.879806], 
 
      [-0.442062, 51.879798], 
 
      [-0.439082, 51.879388], 
 
      [-0.435922, 51.878419], 
 
      [-0.433059, 51.877516], 
 
      [-0.430189, 51.876799], 
 
      [-0.427409, 51.876391], 
 
      [-0.424125, 51.8761], 
 
      [-0.420636, 51.875991], 
 
      [-0.419732, 51.876164], 
 
      [-0.41987, 51.877772], 
 
      [-0.41932, 51.879371], 
 
      [-0.418517, 51.879484], 
 
      [-0.417789, 51.880339], 
 
      [-0.415227, 51.88222], 
 
      [-0.419205, 51.882644], 
 
      [-0.426901, 51.885218], 
 
      [-0.428296, 51.886369], 
 
      [-0.429248, 51.885188], 
 
      [-0.431001, 51.885025], 
 
      [-0.431131, 51.884162], 
 
      [-0.431451, 51.883549], 
 
      [-0.434041, 51.883707], 
 
      [-0.435319, 51.88428], 
 
      [-0.438299, 51.88469], 
 
      [-0.440777, 51.885217], 
 
      [-0.443263, 51.885497], 
 
      [-0.445256, 51.885585], 
 
      [-0.446127, 51.8864], 
 
      [-0.44839, 51.887356], 
 
      [-0.449782, 51.887498], 
 
      [-0.455175, 51.887446], 
 
      [-0.458568, 51.88749], 
 
      [-0.462862, 51.887423], 
 
      [-0.465357, 51.887455], 
 
      [-0.467487, 51.888167], 
 
      [-0.467823, 51.8881] 
 
     ] 
 
     ] 
 
    } 
 
    }] 
 
}
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> 
 
<div id="map_canvas"></div>

関連する問題