我有以下 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但他们没有加载。有什么想法吗?
最佳答案
贴出的代码存在三个问题:
- 大学数组应该是 javascript 对象数组“{}”而不是 javascript 数组“[]”。
- 您需要处理 $.each 中的大学数组
- 您的 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>
关于javascript - 将 JSON 文件中的数据加载到 Google map 中的 map 标记中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28606149/