google Maps Javascript V3.21 无法显示 geoJSON 功能

Question

更新

任何看到这个并说嘿等等他使用 map.data.addGeoJson() 而不是 .loadGeoJson() 的人，这是因为 fiddle 在本地加载 JSON 时需要 addGeoJson。如果运行在 Web 服务器上，loadGeoJSson() 与上述代码的工作方式相同。

下面的原始问题

我运行所有这些都在网络服务器上，因此根据 googleMaps 文档，只要 URI 正确（也适用于 dev i 'm 运行通过 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); 而不是在 setStyle() 中声明 map:map 但没有成功。

some.json 文件在下面并且在正确的目录中，因为 Chrome 并且 firefox 控制台正在注册 200 OK

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"}
        }
    ]
}

Answer 1

您的 GeoJSON 中的坐标向后。 GeoJSON 是 [Longitude, Latitude]，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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="myMap" style='padding:0;'></div>

google Maps Javascript V3.21 无法显示 geoJSON 功能

google Maps Javascript V3.21 trouble displaying geoJSON features

javascript

google-maps

geojson

google-maps-api-3