我正在使用谷歌地图通过信息窗口显示其中的一些地方和用户。
谷歌地图脚本:
<script>
var markers = [
['<p>New York</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 40.769090, -74.002740],
['<p>Washington, Finland</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 38.908127, -77.034863],
];
function initializeMaps() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(40.769090, -74.002740),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var image = 'img/logos.png';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}}</script>
地图信息脚本窗口
<script>
var success = function(data) {
$(".ID").append(data.sessions[0].ID);
$(".Users").append(data.sessions[0].Users);
$.each(data.sessions[0].Location, function(i, value){
$(".Location").append('<li>' + value.name + '</li>');
})
}
$.getJSON("sample.json", success);
</script>
JSON 文件:
{"sessions":[
{
"ID":"123",
"Users":"4",
"Location":
{ "New York": [
{ "id": 1, "name": "Mat" },
{ "id": 2, "name": "Cat" }
],
"Washington": [
{ "id": 1, "name": "Rat" },
{ "id": 2, "name": "Sat" }
]
}
},
{
"ID":"456",
"Users":"1",
"Location":
{ "New York": [
{ "id": 1, "name": "Bat" }
]
}
}]}
的HTML:
<div id="map_canvas"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">More Details</h3>
</div>
<div class="modal-body">
<p class="ID">ID</p>
<ul class="Location"></ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
我面临的问题是在其各自的位置显示特定用户。例如,当我在标记中单击 new york 时,它应该向我显示包含两个会话及其详细信息的信息窗口(根据 JSON 文件)。我不确定如何处理标记 ID 和嵌套 JSON。请帮忙。