我有以下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,但他们没有加载。有什么想法吗?
答案 0 :(得分:7)
发布的代码有三个问题:
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
}
]
}