javascript - 将 JSON 文件中的数据加载到 Google map 中的 map 标记中

Question

我有以下 JSON 文件:

{
   "universities" : [
    [
        "title": "Aberystwyth University",
        "web": "www.aber.ac.uk",
        "phone": "+44 (0)1970 623 111",
        "lat": 52.415524,
        "lng": -4.063066
    ],
    [
        "title": "Bangor University",
        "web": "www.bangor.ac.uk",
        "phone": "+44 (0)1248 351 151",
        "lat": 53.229520,
        "lng": -4.129987
    ],
    [
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "+44 (0)2920 416 138", 
        "lat": 51.482708,
        "lng": -3.165881
    ]
  ]
}

我正在尝试将此文件中的数据加载到我的谷歌地图脚本中，以生成一些带有相应信息窗口的 map 标记。这是我的脚本:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";

function initialize() {

  var mapProp = {
  center:   new google.maps.LatLng(52.4550,-3.3833), //LLANDRINDOD WELLS
   zoom:        7,
   mapTypeId:  google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  $.getJSON(json, function(json1) {

$.each(json1, function(key, data) {

    var latLng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
        position:   latLng,
        map:        map,
        icon:       icon,
        title:      data.title
    });

    var details = data.website + ", " + data.phone + ".";

    bindInfoWindow(marker, map, infowindow, details);

});

 });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

但是数据没有加载(即 map 标记和信息窗口没有显示)？我的 JSON 格式有什么问题吗？我查看过 Stacked 以前的解决方案，例如 this one但他们没有加载。有什么想法吗？

Answer 1

贴出的代码存在三个问题:

1. 大学数组应该是 javascript 对象数组“{}”而不是 javascript 数组“[]”。
2. 您需要处理 $.each 中的大学数组
3. 您的 javascript 对象的“web”属性不正确，代码需要“website”

working fiddle (没有 JSON 提取)

工作代码片段:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";
var infowindow = new google.maps.InfoWindow();

function initialize() {

  var mapProp = {
    center: new google.maps.LatLng(52.4550, -3.3833), //LLANDRINDOD WELLS
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  //  $.getJSON(json, function(json1) {
  var json1 = {
    "universities": [{
        "title": "Aberystwyth University",
        "website": "www.aber.ac.uk",
        "phone": "+44 (0)1970 623 111",
        "lat": 52.415524,
        "lng": -4.063066
      },
      {
        "title": "Bangor University",
        "website": "www.bangor.ac.uk",
        "phone": "+44 (0)1248 351 151",
        "lat": 53.229520,
        "lng": -4.129987
      },
      {
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "+44 (0)2920 416 138",
        "lat": 51.482708,
        "lng": -3.165881
      }
    ]
  };
  $.each(json1.universities, function(key, data) {

    var latLng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      // icon: icon,
      title: data.title
    });

    var details = data.website + ", " + data.phone + ".";

    bindInfoWindow(marker, map, infowindow, details);

    //    });

  });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>