javascript - 将 "getElementsByClassName"中的元素与 google 位置数组进行比较

Question

我正忙着为一所大学制作谷歌地图。我无法根据我拥有的 3 个“谷歌位置”数组(其中包含多组建筑物)一次显示特定建筑物。

理想情况下，我希望我的方法 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>

Answer 1

以下是 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;
}

并且要注意将 html 代码包含在 javascript 代码中，我在 JS 代码中的 //end Accordion 之前发现了后退按钮。

你可以在这里看到结果(我改变了一些CSS，让它看起来更大......等等):JSFiddle