当用户选择一个复选框并单击“在地图上显示”时，我试图显示某些标记。选择“ Gaudi Tour”时应显示2个标记，选择“ Gothic Tour”时应显示两个不同的标记。但是，它不会在createMarkers（）函数中过滤结果，而是在单击按钮时显示所有标记。
我不知道为什么它不过滤结果并且没有出现任何错误。
<section>
<div class="container">
<h2>Choose your tour:</h2>
<div class="container" id="selectTour">
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="one">Gaudi Tour
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="two">Gothic Tour
</label>
</div>
</div>
<div class="container">
<button onclick="updateMarkers();">Show on Map</button>
</div>
<!--The Map-->
<div class="container">
<div id="map"></div>
</div>
</div>
</section>
var map;
var markers = [];
//---------------------Data of Locations-----------------
let locations = [{
name: 'one',
tour: 'gaudi',
coords: { lat: 41.403706, lng: 2.173504 },
content: 'google',
},
{
name: 'one',
tour: 'gaudi',
coords: { lat: 41.4145, lng: 2.1527 },
content: 'maps',
},
{
name: 'two',
tour: 'gothic',
coords: { lat: 41.3839, lng: 2.1821 },
content: 'are'
},
{
name: 'two',
tour: 'gothic',
coords: { lat: 41.3840, lng: 2.1762 },
content: 'annoying'
}
];
//---------------------Initializing Map-----------------
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(41.3851, 2.1734),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
//---------------------Markers-----------------
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: props.iconImage
});
//checking for icon
if (props.iconImage) {
marker.setIcon(props.iconImage);
}
//checking for infowindow
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
function updateMarkers() {
createMarkers();
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i]);
}
}
//---------------------Select Tour-----------------
function createMarkers() {
let selectedLocations = locations.filter(function(obj) {
var selectedTour = document.getElementById("selectTour").value;
return obj.tour === selectedTour;
});
let resultlist = [];
if (document.getElementById("one").checked) {
let one = selectedLocations.filter(function(obj) {
return obj.name === 'one';
});
resultlist = resultlist.concat(one);
}
if (document.getElementById("two").checked) {
let two = selectedLocations.filter(function(obj) {
return obj.name === 'two';
});
resultlist = resultlist.concat(two);
}
for (var i = 0; i < resultlist.length;) {
markers.push({
coords: {
lat: resultlist[i].lat,
lng: resultlist[i].lng
},
content: resultlist[i].name
});
}
}
任何建议都会有很大帮助。
答案 0 :(得分：0)
基于您的原始代码但已修改-我希望这将有助于您查找Google地图，减少“烦人”的'-）
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:100%;
height:80vh;
float:none;
margin:auto;
}
</style>
<script>
let map;
let markers=[];
let infoWindow;
let locations = [
{
name: 'one',
tour: 'gaudi',
latlng: { lat: 41.403706, lng: 2.173504 },
content: 'google',
},
{
name: 'one',
tour: 'gaudi',
latlng: { lat: 41.4145, lng: 2.1527 },
content: 'maps',
},
{
name: 'two',
tour: 'gothic',
latlng: { lat: 41.3839, lng: 2.1821 },
content: 'are'
},
{
name: 'two',
tour: 'gothic',
latlng: { lat: 41.3840, lng: 2.1762 },
content: 'annoying'
}
];
function initMap(){
let options = {
center: new google.maps.LatLng(41.3851, 2.1734),
zoom: 12
};
map = new google.maps.Map( document.getElementById('map'), options );
infoWindow = new google.maps.InfoWindow();
const addmarker=function(args){
let mkr=new google.maps.Marker({
position: args.latlng,
map: map
});
if( args.hasOwnProperty('icon') ) mkr.setIcon( args.icon );
if( args.hasOwnProperty('name') ) mkr.name=args.name;
if( args.hasOwnProperty('content') ) mkr.content=args.content;
google.maps.event.addListener( mkr, 'click', clickhandler );
return mkr;
};
const clickhandler=function(e){
infoWindow.open( map, this );
infoWindow.setContent( this.content );
};
const clearmarkers=function(){
markers.forEach( mkr=>{
mkr.setMap( null );
});
};
Array.prototype.slice.call( document.querySelectorAll('input[type="radio"][name="tour"]') ).forEach(function(input){
input.addEventListener('click', function(e){
if( this.value ){
/* clear any markers added to the map already */
clearmarkers();
/* only show those that qualify based upon selected tour */
locations.forEach( obj=>{
if( obj.tour==this.value ) markers.push( addmarker.call( this, obj ) );
});
}
});
});
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<form>
<!--
if you use `radio` buttons instead of checkboxes then you ensure
that only 1 tour type can be selected at once.
You may note that there is also a hidden field with the same
name before the radio buttons - not strictly necessary in this
case but is a useful trick in some circumstances.
-->
<section>
<div class='container'>
<h2>Choose your tour:</h2>
<input type='hidden' name='tour' value=false />
<div class='container'>
<div class='form-check-inline'>
<label class='form-check-label'>
<input name='tour' value='gaudi' type='radio' class='form-check-input' />Gaudi Tour
</label>
</div>
<div class='form-check-inline'>
<label class='form-check-label'>
<input name='tour' value='gothic' type='radio' class='form-check-input' />Gothic Tour
</label>
</div>
</div>
<!--The Map-->
<div class='container'>
<div id='map'></div>
</div>
</div>
</section>
</form>
</body>
</html>