Google地图标记显示/隐藏 [英] Google Maps Marker Show/hide
本文介绍了Google地图标记显示/隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试了几个代码并搜索了很多答案，但我无法得到这个工作。我对Javascript的知识知之甚少，所以我跳了一个人可以帮助我，因为我正在失去我的想法。
var customIcons = {
monumento：{
icon标记不切换，只是没有任何反应。 ：'images / monumento_ico.png'
}，
酒店：{
图标：'images / hotel_ico.png'
}，
restaurantes：{
图标：'images / restaurante_ico.png'
}，
museus：{
图标：'images / museu_ico.png'
}
};
var markerGroups = {museus：[]，monumentos：[]，restaurantes：[]，hotel：[]};
var gmarkers = [];
function load（）{
var map = new google.maps.Map（document.getElementById（map），{
center：new google.maps.LatLng（ 38.639104，-8.210413），
zoom：12，
mapTypeId：'roadmap'
}）;
var infoWindow = new google.maps.InfoWindow;
map.set（'styles'，[
{
zoomControl：false，
}，
{
featureType：road.highway，
elementType：geometry.fill，
stylers：[
{color：＃ffd986}
]
$ {
featureType：road.arterial，
elementType：geometry.fill，
stylers：[
{color：＃9e574f}
]
}，{
featureType：road.local，
elementType：geometry.fill，
stylers：[
{color：＃d0cbc0 }，
{weight：1.1}
]
}，{
featureType：'road'，
elementType：'labels'，
stylers：[
{saturation：-100}
]
}，{
featureType：'landscape'，
elementType：'geometry'，
元素：[
{hue：'＃ffff00'}，
{gamma：1.4}，
{饱和度：82}，
{亮度：96}
]
}，{
featureType：'poi.school'，
elementType：'geometry'，
stylers：[
{hue：'＃fff700'}，
{亮度：-15}，
{satur ation：99}
]
}
]）;
downloadUrl（markers.xml，function（data）{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName（marker）;
for（var i = 0; i< markers.length; i ++）{
var name = markers [i] .getAttribute（name）;
var address = markers [i ] .getAttribute（address）;
var type = markers [i] .getAttribute（type）;
var point = new google.maps.LatLng（
parseFloat（markers [i] .getAttribute（lat）），
parseFloat（markers [i] .getAttribute（lng）））;
var html =< b>+ name +< / b>< br />+ address;
var icon = customIcons [type] || {};
var marker = new google.maps.Marker（{
map：map，
position：point，
icon：icon.icon，
shadow：icon.shadow，
type：type
}）;
bindInfoWindow（marker，map，infoWindow，html）;
}
}）;
函数createMarker（point，name，address，type）{
var marker = new GMarker（point，customIcons [type]）;
markerGroups [type] .push（marker）;
var html =< b> + name +< / b>< br /> +地址;
GEvent.addListener（marker，'click'，function（）{
marker.openInfoWindowHtml（html）;
}）;
返回标记;
函数toggleGroup（type）{
for（var i = 0; i< markerGroups [type] .length; i ++）{
var marker = markerGroups [类型] [I];
if（marker.isHidden（））{
marker.show（）;
} else {
marker.hide（）;
函数bindInfoWindow（marker，map，infoWindow，html）{
google.maps.event.addListener（marker，'点击'，函数（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
}
函数downloadUrl（url，callback）{
var request = window.ActiveXObject？
new ActiveXObject（'Microsoft.XMLHTTP'）：
new XMLHttpRequest;
request.onreadystatechange = function（）{
if（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request，request.status）;
}
};
request.open（'GET'，url，true）;
request.send（null）;
函数doNothing（）{}
这是HTML：
< div class =map_wrap>
< div class =siderbarmap>
< ul>
< input id =monumentoCheckboxtype =checkboxonclick =toggleGroup（'monumento'）>
< input id =museusCheckboxtype =checkboxonclick =toggleGroup（'museus'）>
< input id =restaurantesCheckboxtype =checkboxonclick =toggleGroup（'restaurantes'）>
< input id =hotelCheckboxtype =checkboxonclick =toggleGroup（'hotel'）>
< / ul>
< / div>
< div id =mapstyle =width：100％; height：585px; z-index：1;>< / div>
这是XML
非常感谢您给予的任何帮助！
< markers>
< marker name =Hotel da Ameiraaddress =Herdade da Ameiralat =38.64109640475479lng = - 8.180432206726096type =hotel/>
< marker name =NúcleoMuseológicodo Convento de S. Domingosaddress =lat =38.643139lng = - 8.212732type =museus/>
< marker name =Centro Interpretativo do Castelo de Montemor-o-Novoaddress =Rua Condessa deValençalat =38.64258748216167lng = - 8.21467108793263type =museus/>
< / markers>
解决方案
您需要查看JavaScript控制台。
.isHidden 方法。 Marker 它是.getVisible。（无法测试您的自定义标记，您没有提供它们）
工作程式码片段：
html，body，＃map，＃map_wrap {height：100％; width：100％;}
< script src = https://maps.googleapis.com/maps/api/js?v=3&ext=.js\"></script><div class =map_wrap> < div class =siderbarmap> < UL>纪念碑（蓝色）< input id =monumentoCheckboxtype =checkboxonclick =toggleGroup（'monumento'）checked =checked/>博物馆（紫色）< input id =museusCheckboxtype =复选框onclick =toggleGroup（'museus'）checked =checked/>餐厅（黄色）< input id =restaurantesCheckboxtype =checkboxonclick =toggleGroup（'restaurantes'）checked =已检查/>酒店（绿色）< input id =hotelCheckboxtype =checkboxonclick =toggleGroup（'hotel'）checked =checked/> < / UL> < / DIV> < div id =mapstyle =width：100％; height：585px; z-index：1;>< / div>< / div>
I tried several codes and searched a lot for an answer, but I can't get this to work. I know very little of Javascript, so i'm hopping someone can help me with this, cause i'm losing my mind with this. The markers are not toggling, just nothing happens.
var customIcons = {
monumento: {
icon: 'images/monumento_ico.png'
},
hotel: {
icon: 'images/hotel_ico.png'
},
restaurantes: {
icon: 'images/restaurante_ico.png'
},
museus: {
icon: 'images/museu_ico.png'
}
};
var markerGroups = { "museus": [], "monumentos": [], "restaurantes": [], "hotel": []};
var gmarkers = [];
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
map.set('styles', [
{
zoomControl: false,
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ color: "#ffd986" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{ color: "#9e574f" }
]
},{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
{ color: "#d0cbc0" },
{ weight: 1.1 }
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -100 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ hue: '#ffff00' },
{ gamma: 1.4 },
{ saturation: 82 },
{ lightness: 96 }
]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [
{ hue: '#fff700' },
{ lightness: -15 },
{ saturation: 99 }
]
}
]);
downloadUrl("markers.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
type: type
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.isHidden()) {
marker.show();
} else {
marker.hide();
}
}
}
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() {}
This is the HTML:
<div class="map_wrap">
<div class="siderbarmap">
<ul>
<input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')">
<input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')">
<input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')">
<input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')">
</ul>
</div>
<div id="map" style="width:100%;height:585px; z-index: 1;"></div>
This is the XML Thank you so much for any help you can give!
<markers>
<marker name="Castelo" address="Rua da Condessa de Valença" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" />
<marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" />
<marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" />
<marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" />
<marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" />
<marker name="Restaurante A Ribeira" address="Rua de São Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" />
<marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" />
<marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valença" lat="38.64258748216167" lng="-8.21467108793263" type="museus" />
</markers>
解决方案
You need to look at the javascript console.
- fixed createMarker to use v3 syntax and used it.
- initialized arrays in markerGroups[type]
- there is no
.isHiddenmethod for a google.maps.Marker it is .getVisible. - there are no .show() or .hide() methods for a google.maps.Marker, it is .setVisible.
- there are no marker shadows in v3 since the implementation of the "visual refresh"
(can't test your custom markers, you didn't provide them)
working code snippet:
var infoWindow = new google.maps.InfoWindow();
var customIcons = {
monumento: {
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
},
hotel: {
icon: 'http://maps.google.com/mapfiles/ms/icons/green.png'
},
restaurantes: {
icon: 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
},
museus: {
icon: 'http://maps.google.com/mapfiles/ms/icons/purple.png'
}
};
var markerGroups = {
"museus": [],
"monumentos": [],
"restaurantes": [],
"hotel": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();
map.set('styles', [{
zoomControl: false
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#ffd986"
}]
}, {
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#9e574f"
}]
}, {
featureType: "road.local",
elementType: "geometry.fill",
stylers: [{
color: "#d0cbc0"
}, {
weight: 1.1
}
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [{
saturation: -100
}]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [{
hue: '#ffff00'
}, {
gamma: 1.4
}, {
saturation: 82
}, {
lightness: 96
}]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [{
hue: '#fff700'
}, {
lightness: -15
}, {
saturation: 99
}]
}]);
// downloadUrl("markers.xml", function (data) {
var xml = xmlParse(xmlData);
// var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
// var icon = customIcons[type] || {};
var marker = createMarker(point, name, address, type, map);
bindInfoWindow(marker, map, infoWindow, html);
}
// });
}
function createMarker(point, name, address, type, map) {
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
// shadow: icon.shadow,
type: type
});
if (!markerGroups[type]) markerGroups[type] = [];
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
bindInfoWindow(marker, map, infoWindow, html);
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
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() {}
google.maps.event.addDomListener(window, 'load', load);
var xmlData = '<markers><marker name="Castelo" address="Rua da Condessa de Valença" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" /><marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" /><marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" /><marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" /><marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" /><marker name="Restaurante A Ribeira" address="Rua de São Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" /><marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" /><marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valença" lat="38.64258748216167" lng="-8.21467108793263" type="museus" /></markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
html,
body,
#map,
#map_wrap {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&ext=.js"></script>
<div class="map_wrap">
<div class="siderbarmap">
<ul>
Monuments (blue)
<input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')" checked="checked" />Museums (purple)
<input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')" checked="checked" />Restaurants (yellow)
<input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')" checked="checked" />Hotels (green)
<input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')" checked="checked" />
</ul>
</div>
<div id="map" style="width:100%;height:585px; z-index: 1;"></div>
</div>
这篇关于Google地图标记显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
