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

Question

我认为我的 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>

Answer 1

您的 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>

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

问题描述

1 个解决方案

解决方案1
0 2015-10-22 23:54:01

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

问题描述

1 个解决方案

解决方案1 0 2015-10-22 23:54:01

解决方案1
0 2015-10-22 23:54:01