图例Google Maps API v3中的简单过滤器 [英] Simple filter in legend Google Maps API v3
本文介绍了图例Google Maps API v3中的简单过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Google地图API和程式设计的新手，我正在学习，但对我来说可能非常困难，因为我缺乏知识和经验，我相当自豪，因为我没有经验。我想知道如何在我的传说中实现一个简单的过滤器？只是一个简单的切换复选框隐藏标记。这将节省我很多时间。任何帮助真的赞赏，感谢阅读！
这是我现在的工作地图：
I am totally new to Google Maps Api and programming, I am learning alot though, but it can be very hard for me because my lack of knowledge and experience, I'm fairly proud that i made this with zero experience. I was wondering how to implement a simple filter in my legend? Just a simple toggle checkbox that hides markers. It would save me alot of time. Any help really appreciated, thanks for reading! This is my working map for now:
<!DOCTYPE html>
<html>
<head>
<title>Spierings Points of Interest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no">
<meta charset="utf-8">
<style>
html, body,
#map_canvas {
width: 800px;
height: 400px;
}
#legend {
font-family: Helvetica;color: #FFD900;
background: rgba(0, 0, 0, 0.6);
padding: 25px;
margin: 25px;
border: 1px solid #FFD900; }
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: new google.maps.LatLng(51.789532, 5.548550),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
stylers: [
{ hue: '#ff1a00' },
{ invert_lightness: true },
{ saturation: -100 },
{ lightness: 33 },
{ gamma: 0.5 }
]
}, {
featureType: 'poi.business',
elementType: ' labels.icon',
stylers: [
{ visibility: 'on' },
{ hue: '#fff700' },
{ lightness: -15 },
{ saturation: 99 }
]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: '#2D333C' },
{ lightness: 15 }
]
}, {
featureType: 'transit.station.rail',
elementType: 'labels.text.stroke',
stylers: [
{ visibility: 'on' },
{ color: '#FF6666' }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'on' },
{ lightness: -35 }
]
}, {
featureType: 'road.local',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ hue: '#FFD900' },
{ lightness: 30 },
{ saturation: 99 }
]
}
]
});
var iconBase = 'https://i.imgur.com/';
var icons = {
spierings: {
name: 'Spierings Mobile Cranes',
icon: iconBase + '2LLAvWx.png'
},
hotel: {
name: 'Hotel',
icon: iconBase + 'fQ85Rxi.png'
},
gasstation: {
name: 'Gas Station',
icon: iconBase + '71YrkJY.png'
},
trainstation: {
name: 'Train Station',
icon: iconBase + 'h1CWWIO.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(51.789532, 5.548550),
type: 'spierings'
}, {
position: new google.maps.LatLng(51.763214, 5.518806),
type: 'hotel'
}, {
position: new google.maps.LatLng(51.752384, 5.533238),
type: 'gasstation'
}, {
position: new google.maps.LatLng(51.764920, 5.529560),
type: 'trainstation'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><h3>Points of Interest</h3></div>
</body>
</html>
推荐答案
像这样
<!DOCTYPE html>
<html>
<head>
<title>Spierings Points of Interest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no">
<meta charset="utf-8">
<style>
html, body,
#map_canvas {
width: 800px;
height: 400px;
}
#legend {
font-family: Helvetica;color: #FFD900;
background: rgba(0, 0, 0, 0.6);
padding: 25px;
margin: 25px;
border: 1px solid #FFD900; }
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
var markers = []; // we well store the markers here,
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: new google.maps.LatLng(51.789532, 5.548550),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
stylers: [
{ hue: '#ff1a00' },
{ invert_lightness: true },
{ saturation: -100 },
{ lightness: 33 },
{ gamma: 0.5 }
]
}, {
featureType: 'poi.business',
elementType: ' labels.icon',
stylers: [
{ visibility: 'on' },
{ hue: '#fff700' },
{ lightness: -15 },
{ saturation: 99 }
]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: '#2D333C' },
{ lightness: 15 }
]
}, {
featureType: 'transit.station.rail',
elementType: 'labels.text.stroke',
stylers: [
{ visibility: 'on' },
{ color: '#FF6666' }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'on' },
{ lightness: -35 }
]
}, {
featureType: 'road.local',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ hue: '#FFD900' },
{ lightness: 30 },
{ saturation: 99 }
]
}
]
});
var iconBase = 'https://i.imgur.com/';
var icons = {
spierings: {
name: 'Spierings Mobile Cranes',
icon: iconBase + '2LLAvWx.png'
},
hotel: {
name: 'Hotel',
icon: iconBase + 'fQ85Rxi.png'
},
gasstation: {
name: 'Gas Station',
icon: iconBase + '71YrkJY.png'
},
trainstation: {
name: 'Train Station',
icon: iconBase + 'h1CWWIO.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
markers.push({
marker: marker,
type: feature.type
});
}
var features = [
{
position: new google.maps.LatLng(51.789532, 5.548550),
type: 'spierings'
}, {
position: new google.maps.LatLng(51.763214, 5.518806),
type: 'hotel'
}, {
position: new google.maps.LatLng(51.752384, 5.533238),
type: 'gasstation'
}, {
position: new google.maps.LatLng(51.764920, 5.529560),
type: 'trainstation'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
var i=0;
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + features[i].type + '\')"><img src="' + icon + '"> ' + name;
legend.appendChild(div);
i++;
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
function toggleType(elm, event, type) {
var on = elm.checked ;
for(var i=0; i<markers.length; i++) {
if (markers[i].type == type) {
markers[i].marker.setMap( on ? map : null);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><h3>Points of Interest</h3></div>
</body>
</html>
Groeten uit Brussel
Groeten uit Brussel
这篇关于图例Google Maps API v3中的简单过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
