我正在创建一个带有信息框和名单的谷歌地图布局，但在代码中的某处我正在复制列表。我已经检查了json以确保它是有效的并且它在jslint上签出。
<script type="text/javascript">
var map;
var arrMarkers = [];
var arrInfoWindows = [];
function initMap(){
var centerCoord = new google.maps.LatLng(48.058249, -122.288615);
var mapOptions = {
zoom: 12,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
jQuery.getJSON("/wp-content/themes/the-language-of-puget-sound/js/map12.json", {}, function(data){
jQuery.each(data.places, function(i, item){
jQuery("#markers").append('<li><a href="#" rel="' + i + '">' + item.English_Name + '</a></li>');
var image = '/wp-content/themes/the-language-of-puget-sound/js/Marker5-50.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.Y_DD, item.X_DD),
map: map,
icon: image,
title: item.English_Name
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content:
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
var i = jQuery(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
infowindow.open(map, marker);
});
});
});
}
jQuery(function(){
// initialize map (create markers, infowindows and list)
initMap();
// "live" bind click event
jQuery("#markers a").on("click", function(){
var i = jQuery(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close();
}
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});
</script>
这是带有div和css的WP页面代码。
<div class="responsive-map">
<div id="map"></div>
</div>
<div id="names">
<strong>Place Names</strong>
<ul id="markers"></ul>
</div>
<style type="text/css" media="screen">
.responsive-map {
overflow:hidden;
padding-bottom:95.25%;
position:relative;
height:400px;
}
#names.img { border: 0; }
#map {
left:0;
top:0;
height:100%;
width: 100%;
position:absolute;
border: 3px solid #93193e;
border-radius: 8px;
}
#names {
top: 10px;
left: 800px;
margin: 30px;
}
</style>
有关列表复制位置的任何建议吗？
以下是工作网站的链接。