将JSON文件中的数据加载到谷歌地图中的地图标记中

Load data from JSON file into map markers in Google Maps

本文关键字：地图 谷歌地图 图标 数据 JSON 文件 加载      更新时间：2024-01-29

我得到了以下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
    ]
  ]
}

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

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以前的解决方案，比如这个，但它们没有加载。有什么想法吗？

发布的代码有三个问题：

  1. university数组应该是javascript对象"｛｝"的数组，而不是javascript数组"[]"
  2. 你需要处理每个$.中的大学数组
  3. javascript对象的"web"属性不正确，代码需要"website"

工作小提琴（没有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>

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
        }
    ]
}
相关文章：