Question

我认为我的JSON文件在语法上是正确的。并且其代码在

之下

[1] "Output: 14.2857142857143"
[1] "Output: 42.8657142857143"
[1] "Output: 71.4457142857143"

我正在尝试使用GeoJson将上面的Json文件添加到下面的google maps api中。我想将这些json对象转换为标记。对于Json甚至谷歌地图，我都是新手。我不确定如何将我的json项目变成标记，但

{
 "locations": [
 {
    "latitude": 38.558961, 
    "longitude": -121.423011,
    "name": "AIRC",
    "title": "THIS IS WHERE STUFF GETS DONE!"
  },
{
    "latitude": 38.562605, 
    "longitude": -121.419683,
    "name": "GUY WEST",
    "title": "PRESIDENT?"
},
{
    "latitude": 38.556652, 
    "longitude": -121.423842,
    "name": "well",
    "title": "WORKOUT"
  },
{
    "latitude": 38.555465, 
    "longitude": -121.422551,
    "name": "Hornetsatdium",
    "title": "FOOTBAL!"
}

]}

Answer 1

您的JSON无效GeoJSON

要由map.data.loadGeoJson进行解析，它必须具有顶级Feature或FeatureCollection

Google Maps Javascript API v3将此错误消息放入控制台： Uncaught InvalidValueError: not a Feature or FeatureCollection

演示错误消息的代码段：

＆＃13;

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addGeoJson(jsonData);

}
google.maps.event.addDomListener(window, "load", initialize);

var jsonData = {
  "locations": [{
      "latitude": 38.558961,
      "longitude": -121.423011,
      "name": "AIRC",
      "title": "THIS IS WHERE STUFF GETS DONE!"
    }, {
      "latitude": 38.562605,
      "longitude": -121.419683,
      "name": "GUY WEST",
      "title": "PRESIDENT?"
    }, {
      "latitude": 38.556652,
      "longitude": -121.423842,
      "name": "well",
      "title": "WORKOUT"
    }, {
      "latitude": 38.555465,
      "longitude": -121.422551,
      "name": "Hornetsatdium",
      "title": "FOOTBAL!"
    }

  ]
};

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

将JSON转换为有效GeoJSON的代码段：

＆＃13;

var map;
var infoWin = new google.maps.InfoWindow({
  pixelOffset: new google.maps.Size(0, -40)
});

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(38.56, -121.425),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addGeoJson(geoJsonData);
  map.data.addListener('click', function(event) {
    infoWin.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('title'));
    infoWin.setPosition(event.feature.getGeometry().get());
    infoWin.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    /*        "latitude": 38.558961,
            "longitude": -121.423011,
            "name": "AIRC",
            "title": "THIS IS WHERE STUFF GETS DONE!"
*/
    "geometry": {
      "type": "Point",
      "coordinates": [-121.423011, 38.558961]
    },
    "properties": {
      "name": "AIRC",
      "title": "THIS IS WHERE STUFF GETS DONE!"
    }
  }, {
    "type": "Feature",
    /*
        "latitude": 38.562605,
            "longitude": -121.419683,
            "name": "GUY WEST",
            "title": "PRESIDENT?"
*/
    "geometry": {
      "type": "Point",
      "coordinates": [-121.419683, 38.562605]
    },
    "properties": {
      "name": "GUY WEST",
      "title": "PRESIDENT?"
    }
  }, {
    "type": "Feature",
    /*
        "latitude": 38.556652,
            "longitude": -121.423842,
            "name": "well",
            "title": "WORKOUT"
*/
    "geometry": {
      "type": "Point",
      "coordinates": [-121.423842, 38.556652]
    },
    "properties": {
      "name": "well",
      "title": "WORKOUT"
    }
  }, {
    "type": "Feature",
    /*
        "latitude": 38.555465,
            "longitude": -121.422551,
            "name": "Hornetsatdium",
            "title": "FOOTBAL!"
*/
    "geometry": {
      "type": "Point",
      "coordinates": [-121.422551, 38.555465]
    },
    "properties": {
      "name": "Hornetsatdium",
      "title": "FOOTBAL!"
    }
  }]
};

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

我试图结合一个JSON文件在谷歌地图中创建标记

1 个答案: