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

【问题标题】：google Maps Javascript V3.21 trouble displaying geoJSON featuresgoogle Maps Javascript V3.21 无法显示 geoJSON 功能
【发布时间】：2015-10-01 17:48:01
【问题描述】：

更新

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

下面的原始问题

我在网络服务器上运行所有这些，因此根据 googleMaps 文档，只要 URI 正确，就可以接受从同一域加载 geoJSON（对于开发人员，我正在通过 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

一些.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"}
        }
    ]
}

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geojson

【解决方案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

代码 sn-p：

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>

【讨论】：