Google Maps API - 标记未显示在外部JSON

时间:2017-04-25 17:21:50

标签: javascript json google-maps google-maps-api-3

我正在尝试使用Google Maps API显示许多多个地图标记,数据位于外部JSON文件中的一系列数组中。

相关HTML / Javascript片段

<div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.8039941, -77.863459),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
        //get JSON data
        $(document).ready(function() {
        $.getJSON("crime_maps_test.json", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lng); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.Incident
            });
            marker.setMap(map);
          });
        });
      });
    </script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=initialize"></script>

crime_maps_test.json片段(实际文件包含几百个数组)

[
  {
     "Incident": "PSU201701139"
    ,"Occurred": "3/25/17 23:25"
    ,"reported": "3/25/17 23:25"
    ,"nature of incident": "Resident Assistant reported the odor of marijuana, origin not located"
    ,"offenses": "Possession of Small Amount of Marijuana"
    ,"location": "Porter Hall"
    ,"disposition": "Open"
    ,"lat": 40.8008254
    ,"lng": -77.8587917
  },
  {
     "Incident": "PSU201701136"
    ,"Occurred": "03/25/2017 9:25 PM to 9:30 PM"
    ,"reported": "3/25/17 21:31"
    ,"nature of incident": "Visitor observed highly intoxicated"
    ,"offenses": "Public Drunkenness"
    ,"location": "Bryce Jordan Center"
    ,"disposition": "Open"
    ,"lat": 40.8086228
    ,"lng": -77.8642905
  },
  {
     "Incident": "PSU201701134"
    ,"Occurred": "03/25/2017 8:52 PM to 8:58 PM"
    ,"reported": "3/25/17 20:58"
    ,"nature of incident": "Resident Assistant reported the odor of marijuana, origin not located"
    ,"offenses": "Possession of Small Amount of Marijuana"
    ,"location": "Curtin Hall 5Th Floor"
    ,"disposition": "Open"
    ,"lat": 40.8051407
    ,"lng": -77.8633569
  }
  ]

我在GitHub上托管项目以避免交叉引用错误。当地图显示且开发人员的工具控制台未记录任何错误时,标记不会显示。我在代码中遗漏了一些阻止标记显示的内容吗?任何人都知道这个问题是什么或可能导致什么?

1 个答案:

答案 0 :(得分:0)

原来有几个JSON条目存在问题。应该验证数据。