Question

更新

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

下面的原始问题

我正在网络服务器上运行所有这些，所以根据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);，而不是在map:map中声明setStyle()而没有运气。

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是[经度，纬度]，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>

google Maps Javascript V3.21在显示geoJSON功能时遇到问题

1 个答案: