我正忙着为大学制作谷歌地图。我在根据3＆＃34;谷歌位置＆＃34;一次显示特定建筑物时遇到问题。我拥有的数组，包含多组建筑物。
理想情况下，我希望我的方法displayLI()从getElementByClassName列表中获取所选元素，并将其与我的所有3个数组进行比较，以确定所选元素的坐标并显示标记。我找不到我的错误。运行不起作用。
// accordion map-nav
var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
allSpan[i].onclick = function() {
if (this.parentNode) {
var childList = this.parentNode.getElementsByTagName('UL');
for (var j = 0; j < childList.length; j++) {
var currentState = childList[j].style.display; // display
if (currentState == "none") { //none
childList[j].style.display = "block"; //block
} else {
childList[j].style.display = "none"; //none
}
}
}
}
}
< input type = "button"
value = "Back"
onclick = "back()"
style = "width: 100%" > <!-- zoom back out to normal mode-->
< /div>
/ / end accordion
//google API code
// arrays of locations
// general first set of loations
var locations = [
['Thwaite Hall', 53.779734, -0.400104, ],
['University Of Hull', 53.771455, -0.367387, ],
['The Lawns', 53.786513, -0.426347, ]
];
//Cottingham university spots
var cott = [
['The Lawns', 53.786513, -0.426347, ca1],
['Needler Hall', 53.784283, -0.415365, ca2],
['Thwaite Hall', 53.779734, -0.400104, ca3]
];
// Uni buildings e.g
var uniBuildings = [
['Venn', 53.769942, -0.368782, cb1],
['Hull University Business School', 53.770244, -0.370305, cb2],
['Staff House', 53.772009, -0.368257, cb3],
['RBB', 53.771496, -0.368842, cb4],
['Applied Science', 53.772372, -0.368942, cb5],
['Fenner', 53.771933, -0.369582, cb6],
['Ferens', 53.770680, -0.367264, cb7],
['Loten', 53.772275, -0.367345, cb8],
['Brynmor Jones Library', 53.771184, -0.369326, cb9],
['Student Union', 53.771872, -0.366331, cb10],
['Cohen', 53.769764, -0.366899, cb11],
['Wilberforce', 53.770685, -0.366115, cb12],
['Larkin', 53.770297, -0.368163, cb13]
];
//listed uni buildings
var listed = [
['Venn', 53.769942, -0.368782, lb1],
['Swale House', 53.769462, -0.371181, lb2],
['Rye House', 53.769350, -0.369564, lb3],
['Nidd, Esk, Wharfe Building', 53.769842, -0.371436, lb4],
['Cohen', 53.769768, -0.367227, lb5]
];
var massiveArray;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12, //10
center: new google.maps.LatLng(53.779734, -0.400104), // original placement 53.771455,-0.367387
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
//run the normal default loop setup b4 navigation
genericLoop(locations, map);
// start built code
// make generic for function test
function genericLoop(x, mapThis) { // try this. if not working
for (i = 0; i < x.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(x[i][1], x[i][2]),
animation: google.maps.Animation.BOUNCE,
map: mapThis
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(x[i][0]);
infowindow.open(mapThis, marker);
}
})(marker, i));
}
}
// change the view and location of markers and zoom
function uniBuildingsClick() {
// changes map size n zoom
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: new google.maps.LatLng(53.771455, -0.367387), // original placement uni view
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// re-populate the map with new locations
genericLoop(uniBuildings, newMap);
}
//changes the view and location of markers and zoom
function cottBuildingsClick() {
// changes map size and zoom
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: new google.maps.LatLng(53.782081, -0.413978), // original placement center
mapTypeId: google.maps.MapTypeId.ROADMAP
});
genericLoop(cott, newMap);
}
// listed buildings
function disListed() {
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: new google.maps.LatLng(53.771455, -0.367387), // original placement center
mapTypeId: google.maps.MapTypeId.ROADMAP
});
genericLoop(listed, newMap);
}
//back button to re zoom out
function back() {
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12, //10
center: new google.maps.LatLng(53.779734, -0.400104), // original placement 53.771455,-0.367387
mapTypeId: google.maps.MapTypeId.ROADMAP
});
genericLoop(locations, newMap);
}
function reFresh() {
google.maps.event.trigger(map, 'resize');
}
// function to show only selected li
function displayLI(idN, className) { // classname is array rn
// passed 'id' is the id of li element (building or residence)
// class is the array
console.log("this works");
//var elementArray = new Array();
var nodeList = document.getElementsByClassName("className"); // compare array lengths and array values
elementArray = [].slice.call(nodeList); // translates DOM to array
// elementArray = Array.prototype.slice.call(nodeList);
console.log(elementArray[0]);
var idNumberOnly = idN.slice(2, 4);
console.log(idNumberOnly); // works
//var selectedElement = elementArray[idNumberOnly];
//console.log(selectedElement.class);
// try to check if the elemenArray is equal to the other arrays?
var currentArray = new Array();
if (compare(elementArray, uniBuildings, idN) === 'true') { // test
console.log("test worked! UniB");
} else if (compare(elementArray, cott, idN) === 'true') {
console.log("cott");
} else if (compare(elementArray, listed, idN) === 'true') {
console.log("listed");
} else {
console.log("not working, get your shit together");
}
for (var i = 0; i < currentArray.length; i++) {
if (idN === currentArray[i][3]) { // assuming the correct array is chosen ... bc id is same for all arrays // maybe starts ay 1?
// display the marker and nothing else
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12, //10
center: new google.maps.LatLng(currentArray[i][1], currentArray[i][2]), // original placement 53.771455,-0.367387
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//genericLoop(currentArray[i], newMap); // if current array not working, try own marker and notification function
marker = new google.maps.Marker({
position: new google.maps.LatLng(currentArray[i][1], currentArray[i][2]),
animation: google.maps.Animation.BOUNCE,
map: newMap
});
// info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(currentArray[i][0]);
infowindow.open(newMap, marker);
});
break;
} else {
// error?
}
}
}
//trial
function compare(array1, array2, idnumber) {
if (array1.length != array2.length) {
return false;
}
for (var i = 0; i < array2.length; i++) {
if (idnumber === array2[i][3]) {
return true;
}
return false;
}
}.prt {
display: none;
}<div>
<div id="map-nav" style="height: 400px; max-width: 200px; background-color: grey; float: left; display: inline-block; position: relative; text-align: left; overflow-y: auto; overflow-x: hidden">
<span style="color: white">Search Estates:</span>
<!-- <input type="text" id="searchField" style="max-width: 150px"><input type="button" onclick="reFresh()" value="Go" id="searchIt" style="max-width: 50px; min-width: 46px"> -->
<br />
<! -- /* styled collapsible UL list*/ -->
<UL id="tree">
<LI style="list-style-type: none"><span><input type="button" value="Campus Buildings" onclick="uniBuildingsClick()" style="width: 100%"> <!-- zoom in to uni zone--></span>
<UL class="prt">
<LI><a id="cb1" class="uniB" onclick="displayLI(this.id, this.class)"><span>Venn</span></a>
</LI>// need the a tags, check error on chrome //something about null
<LI><a id="cb2" class="uniB" onclick="displayLI(this.id, this.class)"><span>Business School</span></a>
</LI>
<LI><a id="cb3" class="uniB" onclick="displayLI(this.id, this.class)"><span>Staff House</span></a>
</LI>
<LI><a id="cb4" class="uniB" onclick="displayLI(this.id, this.class)"><span>RBB</span></a>
</LI>
<LI><a id="cb5" class="uniB" onclick="displayLI(this.id, this.class)"><span>Applied Science</span></a>
</LI>
<LI><a id="cb6" class="uniB" onclick="displayLI(this.id, this.class)"><span>Fenner</span></a>
</LI>
<LI><a id="cb7" class="uniB" onclick="displayLI(this.id, this.class)"><span>Ferens</span></a>
</LI>
<LI><a id="cb8" class="uniB" onclick="displayLI(this.id, this.class)"><span>Loten</span></a>
</LI>
<LI><a id="cb9" class="uniB" onclick="displayLI(this.id, this.class)"><span>Brynmor Jones Library</span></a>
</LI>
<LI><a id="cb10" class="uniB" onclick="displayLI(this.id, this.class)"><span>Student Union</span></a>
</LI>
<LI><a id="cb11" class="uniB" onclick="displayLI(this.id, this.class)"><span>Cohen</span></a>
</LI>
<LI><a id="cb12" class="uniB" onclick="displayLI(this.id, this.class)"><span>Wilberforce</span></a>
</LI>
<LI><a id="cb13" class="uniB" onclick="displayLI(this.id, this.class)"><span>Larkin</span></a>
</LI>
</UL>
</LI>
<LI style="list-style-type: none"><span><input type="button" value="Cottingham Accommodation" onclick="cottBuildingsClick()" style="width: 100%"> <!-- zoom in to cottingham--></span>
<UL class="prt">
<LI><a id="ca1" class="cotA" onclick="displayLI(this.id, this.class)"><span>The Lawns</span></a>
</LI>
<LI><a id="ca2" class="cotA" onclick="displayLI(this.id, this.class)"><span>Needler Hall</span></a>
</LI>
<LI><a id="ca3" class="cotA" onclick="displayLI(this.id, this.class)"><span>Thwaite Hall</span></a>
</LI>
</UL>
</LI>
<LI style="list-style-type: none"><span><input type="button" value="Listed Buildings" onclick="disListed()" style="width: 100%"></span>
<UL class="prt">
<LI><a id="lb1" class="lisB" onclick="displayLI(this.id, this.class)"><span>Venn</span></a>
</LI>
<LI><a id="lb2" class="lisB" onclick="displayLI(this.id, this.class)"><span>Swale House</span></a>
</LI>
<LI><a id="lb3" class="lisB" onclick="displayLI(this.id, this.class)"><span>Rye House</span></a>
</LI>
<LI><a id="lb4" class="lisB" onclick="displayLI(this.id, this.class)"><span>Esk, Wharfe, Nidd (Business)</span></a>
</LI>
<LI><a id="lb5" class="lisB" onclick="displayLI(this.id, this.class)"><span>Cohen</span></a>
</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
// accordion script
</script>
<div id="map-canvas" style="width: 500px; height: 400px; float:left"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
// google script
</script>
</div>
答案 0 :(得分：0)
这里是displayLI（）和compare（）函数的新JS代码：
function displayLI(idN) {
var cott = [
['The Lawns', 53.786513, -0.426347, 'ca1'],
['Needler Hall', 53.784283, -0.415365, 'ca2'],
['Thwaite Hall', 53.779734, -0.400104, 'ca3']
];
// Uni buildings e.g
var uniBuildings = [
['Venn', 53.769942, -0.368782, 'cb1'],
['Hull University Business School', 53.770244, -0.370305, 'cb2'],
['Staff House', 53.772009, -0.368257, 'cb3'],
['RBB', 53.771496, -0.368842, 'cb4'],
['Applied Science', 53.772372, -0.368942, 'cb5'],
['Fenner', 53.771933, -0.369582, 'cb6'],
['Ferens', 53.770680, -0.367264, 'cb7'],
['Loten', 53.772275, -0.367345, 'cb8'],
['Brynmor Jones Library', 53.771184, -0.369326, 'cb9'],
['Student Union', 53.771872, -0.366331, 'cb10'],
['Cohen', 53.769764, -0.366899, 'cb11'],
['Wilberforce', 53.770685, -0.366115, 'cb12'],
['Larkin', 53.770297, -0.368163, 'cb13']
];
//listed uni buildings
var listed = [
['Venn', 53.769942, -0.368782, 'lb1'],
['Swale House', 53.769462, -0.371181, 'lb2'],
['Rye House', 53.769350, -0.369564, 'lb3'],
['Nidd, Esk, Wharfe Building', 53.769842, -0.371436, 'lb4'],
['Cohen', 53.769768, -0.367227, 'lb5']
];
var currentArray = new Array();
if (compare(uniBuildings, idN) !== false) {
alert("test worked! UniB");
currentArray=compare(uniBuildings, idN);
}
if (compare(cott, idN) !== false) {
currentArray=compare(cott, idN);
alert("cott");
}
if (compare(listed, idN) !== false) {
currentArray=compare(listed, idN);
alert("listed");
}
newMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12, //10
center: new google.maps.LatLng(currentArray[1], currentArray[2]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(currentArray[1], currentArray[2]),
animation: google.maps.Animation.BOUNCE,
map: newMap
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(currentArray[0]);
infowindow.open(newMap, marker);
});
}
function compare(array2, idnumber) {
for (var i = 0; i < array2.length; i++) {
if (idnumber === array2[i][3]) {
return array2[i];
}
}
return false;
}
对于html，你应该像这样制作li标签：
<UL id="tree">
<LI style="list-style-type: none"><span><input type="button" value="Campus Buildings" onclick="uniBuildingsClick()" style="width: 100%"> <!-- zoom in to uni zone--></span>
<UL class="prt">
<LI><a id="cb1" class="uniB" onclick="displayLI(this.id)"><span>Venn</span></a>
</LI><!--need the a tags, check error on chrome //something about null-->
<LI><a id="cb2" class="uniB" onclick="displayLI(this.id)"><span>Business School</span></a>
</LI>
<LI><a id="cb3" class="uniB" onclick="displayLI(this.id)"><span>Staff House</span></a>
</LI>
<LI><a id="cb4" class="uniB" onclick="displayLI(this.id)"><span>RBB</span></a>
</LI>
<LI><a id="cb5" class="uniB" onclick="displayLI(this.id)"><span>Applied Science</span></a>
</LI>
<LI><a id="cb6" class="uniB" onclick="displayLI(this.id)"><span>Fenner</span></a>
</LI>
<LI><a id="cb7" class="uniB" onclick="displayLI(this.id)"><span>Ferens</span></a>
</LI>
<LI><a id="cb8" class="uniB" onclick="displayLI(this.id)"><span>Loten</span></a>
</LI>
<LI><a id="cb9" class="uniB" onclick="displayLI(this.id)"><span>Brynmor Jones Library</span></a>
</LI>
<LI><a id="cb10" class="uniB" onclick="displayLI(this.id)"><span>Student Union</span></a>
</LI>
<LI><a id="cb11" class="uniB" onclick="displayLI(this.id)"><span>Cohen</span></a>
</LI>
<LI><a id="cb12" class="uniB" onclick="displayLI(this.id)"><span>Wilberforce</span></a>
</LI>
<LI><a id="cb13" class="uniB" onclick="displayLI(this.id)"><span>Larkin</span></a>
</LI>
</UL>
</LI>
<LI style="list-style-type: none"><span><input type="button" value="Cottingham Accommodation" onclick="cottBuildingsClick()" style="width: 100%"> <!-- zoom in to cottingham--></span>
<UL class="prt">
<LI><a id="ca1" class="cotA" onclick="displayLI(this.id)"><span>The Lawns</span></a>
</LI>
<LI><a id="ca2" class="cotA" onclick="displayLI(this.id)"><span>Needler Hall</span></a>
</LI>
<LI><a id="ca3" class="cotA" onclick="displayLI(this.id)"><span>Thwaite Hall</span></a>
</LI>
</UL>
</LI>
<LI style="list-style-type: none"><span><input type="button" value="Listed Buildings" onclick="disListed()" style="width: 100%"></span>
<UL class="prt">
<LI><a id="lb1" class="lisB" onclick="displayLI(this.id)"><span>Venn</span></a>
</LI>
<LI><a id="lb2" class="lisB" onclick="displayLI(this.id)"><span>Swale House</span></a>
</LI>
<LI><a id="lb3" class="lisB" onclick="displayLI(this.id)"><span>Rye House</span></a>
</LI>
<LI><a id="lb4" class="lisB" onclick="displayLI(this.id)"><span>Esk, Wharfe, Nidd (Business)</span></a>
</LI>
<LI><a id="lb5" class="lisB" onclick="displayLI(this.id)"><span>Cohen</span></a>
</LI>
</UL>
</LI>
</UL>
你的CSS应该是这样的：
.prt li{
/*display: none;*/
cursor: pointer;
}
请注意使用javascript代码包含html代码，我在JS代码中的//end accordion之前找到了后退按钮。
你可以在这里看到结果（我改变了一些css但是为了让它看起来更大......等等）：JSFiddle