当用户选择一个复选框并单击“在地图上显示”时,我试图显示某些标记。选择“高迪之旅”时应显示 2 个标记,选择“哥特式之旅”时应显示两个不同的标记。但是,它不会过滤 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);
}
任何建议都会有很大帮助。
相关分类