【问题标题】:Google Maps API - Markers not showing up from external JSONGoogle Maps API - 标记未从外部 JSON 中显示
【发布时间】:2017-04-25 17:21:49
【问题描述】:

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

相关 HTML/Javascript 的 sn-p

<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 sn-p(实际文件包含几百个数组)

[
  {
     "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 上托管该项目以避免交叉引用错误。在显示地图且开发人员工具控制台未记录任何错误时,标记未显示。我的代码中是否遗漏了阻止标记显示的内容?有谁知道是什么导致或可能导致此问题?

【问题讨论】:

  • The posted code works with the posted JSON,也许你在加载它时遇到问题,也许在 $getJSON 中添加一些错误处理,看看为什么你没有得到结果)
  • 发布的 JSON 仅包含 3 个数组。实际的 JSON 包含几百个数组。您知道如何将错误处理添加到 $getJSON 吗?
  • 您的 JSON 文件有效吗?你检查了吗?如果您的代码适用于 3 个项目,为什么它会因“数百个”而失败?使用例如 http://jsonlint.com/ 验证您的 JSON 文件,并按照建议尝试调试您的 get 请求结果。
  • 如何调试?使用您的 JavaScript 控制台。 console.log(json1) 上面的 $.each 循环应该是一个好的开始。然后检查你的控制台,看看里面有什么。
  • MrUpsidown 是的,有几个无效条目。谢谢!

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


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2013-04-12
    • 2014-07-29
    • 2016-09-15
    • 2014-10-10
    • 2012-04-12
    • 1970-01-01
    • 1970-01-01
    • 2021-10-21
    • 2015-08-14
    相关资源
    最近更新 更多