无法加载geojson文件

时间:2016-02-03 18:52:24

标签: javascript google-maps geojson

我正在尝试在地图上加载geoJson文件,但它无法正常工作 这是我的代码:

{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [57.089460, -2.082101],
        [56.744047, -2.464766],
        [56.977826, -2.720955],
        [57.089460, -2.082101]
      ]
    ]
  }
}

在初始化函数中:

var mapCanvas = document.getElementById('map');
var mapOptions = {
   center: new google.maps.LatLng(56.975012, -2.343829),
   zoom: 9,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);

var localLayer = new google.maps.Data();
localLayer.loadGeoJson('js/coordinates.json');
localLayer.setMap(map);

如果你看到错误,你能告诉我我做错了吗? (我的json文件的路径是正确的)

2 个答案:

答案 0 :(得分:2)

如果我通过geojsonlint.com运行geoJSON,则无效:

  

无效的GeoJSON   第1行:需要“属性”属性

这会验证(但坐标是向后的):

{
  "type": "Feature",
"properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [57.089460, -2.082101],
        [56.744047, -2.464766],
        [56.977826, -2.720955],
        [57.089460, -2.082101]
      ]
    ]
  }
};

具有更正的坐标:

proof of concept fiddle

代码段

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(56.975012, -2.343829),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var localLayer = new google.maps.Data();
  localLayer.addGeoJson(geoJson);
  localLayer.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-2.082101, 57.089460],
        [-2.464766, 56.744047],
        [-2.720955, 56.977826],
        [-2.082101, 57.089460]
      ]
    ]
  }
};
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

答案 1 :(得分:0)

要素对象必须包含名为&#34;属性&#34;。feature-objects的成员。

因此它可以为空,您可以将"properties":null添加到要素对象中。