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

I am trying to combine a JSON file to create markers in a google maps

本文关键字：谷歌地图 创建 文件 结合 JSON      更新时间：2023-09-26

我认为我的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!"
}
]}

我试图使用GeoJson将上面的Json文件添加到下面的谷歌地图api。我想把这些json对象变成标记。对于Json甚至google地图，我都是一个新手。我不太确定如何把我的json对象变成标记虽然

     <!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Simple</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 38.55914, lng: -121.423473},
            zoom: 16,
            disableDefaultUI: true
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson('file:///GOOGLE_MAPS_JAVASCIPT/csus_locations.JSON');
}
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
  </body>
</html>

您的JSON是无效的GeoJSON

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

Google Maps Javascript API v3将这个错误信息放在控制台中:Uncaught InvalidValueError: not a Feature or FeatureCollection

显示错误消息的代码片段: 

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!"
    }
  ]
};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

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

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!"
    }
  }]
};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

相关文章：