将数据从JSON文件加载到Google地图中的地图标记中

时间:2015-02-19 12:15:21

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

我有以下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
    ]
  ]
}

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

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);

但是数据没有加载(即地图标记和信息窗口没有显示)?我的JSON格式有问题吗?我已经查看了Stacked之前的解决方案,例如this one,但他们没有加载。有什么想法吗?

2 个答案:

答案 0 :(得分:7)

发布的代码有三个问题:

  1. 大学数组应该是一个javascript对象数组“{}”而不是javascript数组“[]”。
  2. 您需要在$ .each
  3. 中处理大学数组
  4. 您的javascript对象的“web”属性不正确,代码需要“网站”
  5. 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>

答案 1 :(得分:0)

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
        }
    ]
}