【发布时间】：2019-05-26 13:37:20
【问题描述】：
当用户选择一个复选框并单击“在地图上显示”时，我试图显示某些标记。选择“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
});
}
}
任何建议都会有很大帮助。
【问题讨论】：
-
createMarkers什么都不做（至少任何有用的东西，resultlist总是空的）。updateMarkers总是添加所有标记。 -
我确实认为是这样，但是
resultlist = resultlist.concat(one);不会添加到resultlist中吗？仍处于学习 JavaScript 的早期阶段，如果这是一个愚蠢的问题，请见谅！