为什么我无法将以下GeoJson数据导入Google地图

时间:2017-04-05 16:33:26

标签: google-maps geojson

GeoJson数据有什么问题。

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

提前致谢。

1 个答案:

答案 0 :(得分:3)

我得到的错误(在Chrome中)是:

  

in property" features":at index 0:in property" geometry":in property" coordinates":at index 0:first和last position not not等于

修复(通过复制第一个点并将其添加到数组的末尾),显示多边形。

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>
&#13;
&#13;
&#13;