Javascript 不使用jQuery切换google地图标记

我正在使用Google Maps API v.3显示位置标记和位置信息，这些标记和位置信息来自一个XML文件，该文件是在从MySQL数据库（MySQL->XML->Google Maps API）加载页面时构建的

我需要知道的是如何根据复选框的id是否与行中定义的变量值匹配来切换开/关标记

var nom = markers[i].getAttribute("nom");

只使用普通javascript，不使用jQuery。以下是我正在使用的完整脚本：

//main function
function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(15.31,32.35),
    zoom: 2,
    mapTypeId: 'terrain',
    panControl: false,
    streetViewControl: false
  });
  var infoWindow = new google.maps.InfoWindow;

//calls a php script that builds the xml file from the database and prepares the map -- see below in the question
downloadUrl("phpToXML.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var nom = markers[i].getAttribute("nom");
      var lieu = markers[i].getAttribute("lieu");
      var date = markers[i].getAttribute("date");
      var dateFin = markers[i].getAttribute("dateFin");
      var descCas = markers[i].getAttribute("descCas");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<strong>"  + nom + " > " + lieu + "</strong><br />" + date + " - " + dateFin + "<p>" + descCas + "</p>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//主函数
函数加载（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（15.31,32.35），
缩放：2，
mapTypeId:'地形'，
泛控制：错误，
街景控制：错误
});
var infoWindow=new google.maps.infoWindow；
//调用一个php脚本，该脚本从数据库构建xml文件并准备映射——请参见下面的问题
下载URL（“phpToXML.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i”+nom+“>”+liue+”“+date+”-“+dateFin+”“+descCas+”
”；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

我想我必须创建一个数组来存储标记，并在循环中使用一个函数来遍历所有标记，并仅更改与与复选框id匹配的变量NOM值关联的实例的可见性值。问题只是我不知道怎么做

总而言之，这里是HTML的基本结构

<div id="selecteur">
<form id="selection" action="#">
<li><input type="checkbox" name="entreprises" id="NAME#1 SOME JS FUNCTION HAS TO BE CALLED HERE I GUESS></li>           
</form>
</div>

将所有标记放在一个数组中（我将其命名为
gmarkers
）
添加“nom”属性作为标记的属性（gmarkers[i].nom），更改：


致：

创建一个函数来运行复选框的onclick，该复选框适当地显示或隐藏标记：

函数显示名称（名称，复选框）{
var inputs=document.getElementsByTagName（“输入”）；//或document.forms[0]。元素；
var cbs=[]；//将包含所有复选框
var复选框=[]；
对于（变量i=0；i

html来调用上述内容：

<li><input type="checkbox" name="entreprises" id="NAME#1" onclick="displayNom('Nestl&#xE9;', this)" />Nestl&#xE9;</li>
<li><input type="checkbox" name="entreprises" id="NAME#2" onclick="displayNom('Novartis', this)" />Novartis</li>
<li><input type="checkbox" name="entreprises" id="NAME#2" onclick="displayNom('Vitol', this)" />Vitol</li>
<!-- etc. -->

雀巢和xE9
诺华
维多

---

（对于一个“代码片段”来说，代码太多了）

可能重复的代码是不重复的。读，读什么？您已经回答了自己的问题：创建一个数组来存储标记，并在循环中使用一个函数来运行所有标记，并仅更改与与复选框id匹配的变量NOM值关联的实例的可见性值。这个问题就是如何做到这一点的一个例子。那么，我应该在我的代码中将实现这一点的函数放在哪里呢？请提供一个示例，其中包括它工作所需的任何HTML/XML或CSS的示例。非常感谢您的出色工作！最后一个问题是，在勾选/取消勾选复选框时，我会得到“TypeError:复选框[gmarkers[I].nom]未定义”。（我将您的代码应用到我的网页上）您的代码/页面与发布的示例不同。您的更改使其无法工作（

文本为空）。解决这个问题是另一个问题。真的吗？我已经编辑了3个示例标记范围的差异，添加了相应的名称，但仍然出现了这个错误。我的页面上的nodeValue函数的工作方式肯定存在问题。但是我不太了解这个函数的细节，所以对我来说修复它并不容易。它不是nodeValue函数。当

中没有文本内容时，它是displayNom函数（nodeValue所做的一切就是获取该内容）。

  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon
  });

    var marker = new google.maps.Marker({
        nom: nom,
        map: map,
        position: point,
        icon: icon.icon
    });

function displayNom(nom, checkbox) {
    var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;
    var cbs = []; //will contain all checkboxes
    var checkboxes = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {
            cbs.push(inputs[i]);
            checkboxes[nodeValue(inputs[i].parentNode).trim()] = inputs[i];
        }
    }
    for (var i = 0; i < gmarkers.length; i++) {
        if (checkboxes[gmarkers[i].nom].checked) {
            if (gmarkers[i].getMap() === null) gmarkers[i].setMap(map);
        } else {
            if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
        }
    }
}

<li><input type="checkbox" name="entreprises" id="NAME#1" onclick="displayNom('Nestl&#xE9;', this)" />Nestl&#xE9;</li>
<li><input type="checkbox" name="entreprises" id="NAME#2" onclick="displayNom('Novartis', this)" />Novartis</li>
<li><input type="checkbox" name="entreprises" id="NAME#2" onclick="displayNom('Vitol', this)" />Vitol</li>
<!-- etc. -->