在没有jQuery的情况下切换谷歌地图标记
Toggling google maps markers without jQuery
我正在使用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é" lieu="Colombie" date="1986" dateFin="2012" lat="4.115673" lng="-72.930130" type="victHu" victNHu="0" descCas="<p>Entre 1986 et 2009, 13 syndicalistes sont assassin&eacute;s, dont, en 2009, Gustavo Gomez, suite &agrave; une p&eacute;tition du syndicat contre Nestl&eacute; Purina Colombie et en 2007 Jos&eacute; de Jesus Marin Vargas. De m&ecirc;me en 2005, Gustavo Romero, de Nestl&eacute; Cicolac, est assassin&eacute; apr&egrave;s avoir d&eacute;couvert que Nestl&eacute; utilise du lait p&eacute;rim&eacute; pour produire son fameux produit Milo.</p> <hr /> <p>Nestl&eacute; rejette toutes les accusations d'intimidation et de tout comportement anti-syndical. Il reviendrait aux filiales et aux autorit&eacute;s locales de r&eacute;soudre les questions de s&eacute;curit&eacute; et de conflit.</p> <hr /> <p>Sources:</p> <ul> <li>ALLIANCE SUD (2011)</li> <li>MULTIWATCH (2011)</li> <li>MULTIWATCH(2007)</li> <li>ILRF (2006)</li> <li>MULTIWATCH (2012b)</li> <li>MULTIWATCH (2012)</li> </ul>"/>
<marker nom="Nestlé" lieu="Suisse" date="2003" dateFin="2008" lat="46.480400" lng="8.133600" type="victHu" victNHu="0" descCas="<p>Deux cas d'infiltration et d'espionnage du groupe altermondialiste Attac qui menait une enqu&ecirc;te sur Nestl&eacute; afin de publier un livre sur l'entreprise.</p> <hr /> <p>L'organisation Attac, selon Peter Brabeck-Letmathe (PDG de Nestl&eacute; entre 1997 et 2008), se montre violente et repr&eacute;sente donc une menace r&eacute;elle pour Nestl&eacute;. La d&eacute;marche n'avait, selon lui, rien d'illicite et fut men&eacute;e &agrave; titre pr&eacute;ventif contre la menace potentielle d'une guerre id&eacute;ologique men&eacute;e par Attac contre Nestl&eacute;.</p> <hr /> <p>Sources:</p> <ul> <li>ATTAC (2012)</li> <li>MULTIWATCH (2010d)</li> </ul>"/>
<!-- ... --?
</markers>
- 将所有标记放在一个数组中(我将其命名为
gmarkers
) -
添加 "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
});
- 创建一个函数以在单击复选框时运行,该复选框适当地显示或隐藏标记:
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é', this)" />Nestlé</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. -->
工作小提琴("代码片段"的代码太多)
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 在谷歌地图上绘制位置数据库
- 标记的实时更新,无需加载页面谷歌地图API V3
- 可以't计算自定义谷歌地图的js
- 谷歌地图可以't添加正确的标记ID
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图v3标记没有显示ie8和9