javascript - Google Maps Javascript V3.21无法显示geoJSON功能

更新

任何看到这一点并说嘿的人，请稍等，他使用的是map.data.addGeoJson()而不是.loadGeoJson()，这是因为小提琴在本地加载JSON时需要addGeoJson。如果在Web服务器上运行，loadGeoJSson()的作用与以上代码相同。

下面的原始问题

我正在网络服务器上运行所有这些程序，因此根据googleMaps文档，只要URI正确，就可以接受从同一域中加载geoJSON（同样对于dev我正在通过http运行geoJSON请求，不确定是否重要））。为了简单起见，我将JSON对象与index.html和mapInit.js文件放在同一目录中。
根据API文档，我尝试过的所有功能都可以在3.21版的实际参考部分中找到，因此我假设它们仍然可以使用。我也有相应插入的API密钥。

我的问题

为什么loadGeoJson无法正常工作，我声明不正确还是样式不正确？

什么工作

该地图会很好地加载并以正确的位置为中心，然后加载自定义标记并相应地将地图居中。

什么不起作用

使用customLayer.loadGeoJSON("some.json")加载geoJSON文件时，如果切换到使用customLayer.addGeoJSON("some.json")，则不会出现任何错误，但在控制台中会出现无效的要素或要素收集错误。
另外，customLayer.setStyle({icon:image})似乎没有设置我也尝试过的样式customLayer.StyleOptions({icon:image})。

所以我坚持使用loadGeoJson()，因为它似乎正在加载JSON。

index.html

!DOCTYPE html
<html>
<body>
<div id="myMap" style='padding:0; height: 800px; width:100%;'></div>
</body>
<center>
    <script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script> src="mapInit.js"</script>
</html>

mapInit.js

function init(){
var mapCanvas = document.getElementById('myMap');
var map;
var image = "../images/marker.svg";

var userCenter = new google.maps.LatLng(30.382288, -97.727447);
var mapOptions = {
    draggable: true,
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    zoom: 8,
    center:userCenter
};

map = new google.maps.Map(mapCanvas,mapOptions);

var customLayer = new google.maps.Data();

customLayer.loadGeoJson("some.json");
customLayer.setStyle({ title: '#',
    icon:image,
    map: map,
 });

customLayer.forEach(function(feature) {
     var point = new google.maps.LatLng(feature.getProperty('coordinates'))
     var mark = new google.maps.Marker({
        position: point,
        title: '#',
        icon:image,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
});
// customLayer.setMap(map);

var marker = new google.maps.Marker({
       position: userCenter,
       title: 'Your Location',
       icon:image,
       map: map,
       draggable: true,
       animation: google.maps.Animation.DROP
   });
}

我也尝试添加customLayer.setMap(map);而不是在map:map中没有运气的情况下声明setStyle()。

当Chrome和firefox控制台注册200时，some.json文件在下面且在正确的目录中

some.json

{
    "type": "FeatureCollection",
    "features":[
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [30.388256,-97.739863]},
         "properties": {"prop0": "value0"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [30.389904,-97.739226]},
         "properties": {"prop1": "value1"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [30.384617,-97.739348]},
         "properties": {"prop2": "value2"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [30.387876,-97.7396]},
         "properties": {"prop3": "value3"}
        }
    ]
}

最佳答案

您的坐标在GeoJSON中是向后的。 GeoJSON为[经度，纬度]，超过90度是无效纬度。如果将GeoJSON粘贴到geojsonlint.com，您将在南极看到所有标记。

GeoJSON应该是：

{
    "type": "FeatureCollection",
    "features":[
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [-97.739863,30.388256]},
         "properties": {"prop0": "value0"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [-97.739226,30.389904]},
         "properties": {"prop1": "value1"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [-97.739348,30.384617]},
         "properties": {"prop2": "value2"}
        },
        { "type": "Feature",
         "geometry": {"type": "Point", "coordinates": [-97.7396,30.387876]},
         "properties": {"prop3": "value3"}
        }
    ]
};

proof of concept fiddle

代码段：

function init() {
  var mapCanvas = document.getElementById('myMap');
  var map;
  var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";

  var userCenter = new google.maps.LatLng(30.382288, -97.727447);
  var mapOptions = {
    draggable: true,
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    zoom: 13,
    center: userCenter
  };

  map = new google.maps.Map(mapCanvas, mapOptions);

  var customLayer = new google.maps.Data();

  map.data.addGeoJson(jsonData);
  map.data.setStyle({
    title: '#',
    icon: image,
    map: map,
  });

  map.data.forEach(function(feature) {
    var point = new google.maps.LatLng(feature.getProperty('coordinates'))
    var mark = new google.maps.Marker({
      position: point,
      title: '#',
      icon: image,
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    });
  });
  // customLayer.setMap(map);

  var marker = new google.maps.Marker({
    position: userCenter,
    title: 'Your Location',
    icon: image,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP
  });
}
google.maps.event.addDomListener(window, 'load', init);
var jsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-97.739863, 30.388256]
    },
    "properties": {
      "prop0": "value0"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-97.739226, 30.389904]
    },
    "properties": {
      "prop1": "value1"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-97.739348, 30.384617]
    },
    "properties": {
      "prop2": "value2"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-97.7396, 30.387876]
    },
    "properties": {
      "prop3": "value3"
    }
  }]
};

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="myMap" style='padding:0;'></div>