在没有jQuery的情况下切换谷歌地图标记

Toggling google maps markers without jQuery

本文关键字:谷歌 地图 图标 情况下 jQuery      更新时间:2023-09-26
我正在使用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() {}

我想我必须创建一个数组来存储标记,并在循环中使用一个函数来运行所有标记,并仅更改与与复选框 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>

XML 输出通常如下所示:

<markers>
  <marker nom="Nestl&#xE9;" lieu="Colombie" date="1986" dateFin="2012" lat="4.115673" lng="-72.930130" type="victHu" victNHu="0" descCas="&lt;p&gt;Entre 1986 et 2009, 13 syndicalistes sont assassin&amp;eacute;s, dont, en 2009, Gustavo Gomez, suite &amp;agrave; une p&amp;eacute;tition du syndicat contre Nestl&amp;eacute; Purina Colombie et en 2007 Jos&amp;eacute; de Jesus Marin Vargas. De m&amp;ecirc;me en 2005, Gustavo Romero, de Nestl&amp;eacute; Cicolac, est assassin&amp;eacute; apr&amp;egrave;s avoir d&amp;eacute;couvert que Nestl&amp;eacute; utilise du lait p&amp;eacute;rim&amp;eacute; pour produire son fameux produit Milo.&lt;/p&gt;&#13;&#10;&lt;hr /&gt;&#13;&#10;&lt;p&gt;Nestl&amp;eacute; rejette toutes les accusations d'intimidation et de tout comportement anti-syndical. Il reviendrait aux filiales et aux autorit&amp;eacute;s locales de r&amp;eacute;soudre les questions de s&amp;eacute;curit&amp;eacute; et de conflit.&lt;/p&gt;&#13;&#10;&lt;hr /&gt;&#13;&#10;&lt;p&gt;Sources:&lt;/p&gt;&#13;&#10;&lt;ul&gt;&#13;&#10;&lt;li&gt;ALLIANCE SUD (2011)&lt;/li&gt;&#13;&#10;&lt;li&gt;MULTIWATCH (2011)&lt;/li&gt;&#13;&#10;&lt;li&gt;MULTIWATCH(2007)&lt;/li&gt;&#13;&#10;&lt;li&gt;ILRF (2006)&lt;/li&gt;&#13;&#10;&lt;li&gt;MULTIWATCH (2012b)&lt;/li&gt;&#13;&#10;&lt;li&gt;MULTIWATCH (2012)&lt;/li&gt;&#13;&#10;&lt;/ul&gt;"/>
  <marker nom="Nestl&#xE9;" lieu="Suisse" date="2003" dateFin="2008" lat="46.480400" lng="8.133600" type="victHu" victNHu="0" descCas="&lt;p&gt;Deux cas d'infiltration et d'espionnage du groupe altermondialiste Attac qui menait une enqu&amp;ecirc;te sur Nestl&amp;eacute; afin de publier un livre sur l'entreprise.&lt;/p&gt;&#13;&#10;&lt;hr /&gt;&#13;&#10;&lt;p&gt;L'organisation Attac, selon Peter Brabeck-Letmathe (PDG de Nestl&amp;eacute; entre 1997 et 2008), se montre violente et repr&amp;eacute;sente donc une menace r&amp;eacute;elle pour Nestl&amp;eacute;. La d&amp;eacute;marche n'avait, selon lui, rien d'illicite et fut men&amp;eacute;e &amp;agrave; titre pr&amp;eacute;ventif contre la menace potentielle d'une guerre id&amp;eacute;ologique men&amp;eacute;e par Attac contre Nestl&amp;eacute;.&lt;/p&gt;&#13;&#10;&lt;hr /&gt;&#13;&#10;&lt;p&gt;Sources:&lt;/p&gt;&#13;&#10;&lt;ul&gt;&#13;&#10;&lt;li&gt;ATTAC (2012)&lt;/li&gt;&#13;&#10;&lt;li&gt;MULTIWATCH (2010d)&lt;/li&gt;&#13;&#10;&lt;/ul&gt;"/>
  <!-- ... --?
</markers>
  1. 将所有标记放在一个数组中(我将其命名为gmarkers
  2. 添加 "nom" 属性作为标记的属性 (gmarkers[i].nom),更改:

      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
    });
  1. 创建一个函数以在单击复选框时运行,该复选框适当地显示或隐藏标记:

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);
        }
    }
}

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. -->

工作小提琴("代码片段"的代码太多)