隐藏谷歌地图标记，直到被复选框激活

Question

我设置了一个谷歌地图，可以根据它们的类别过滤标记。但是，当您首次登陆页面时，它们当前可见。触发所有复选框过滤器后，它们将被隐藏。但是，我希望标记在您首次登陆页面时隐藏，并且仅在复选框过滤器触发时才可见。

这是我的代码：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Apple', 51.514227, -0.142056, 'shopping'],
['1', 'Title 1', 51.512424, -0.147783, 'hotels'],
['2', 'Title 2', 51.512164, -0.144521, 'culture'],
['3', 'Title 3', 51.511697, -0.144113, 'foodanddrink'],
['4', 'Title 4', 51.511817, -0.143566, 'shopping']
];
mp = [
['0', 51.512187, -0.144769, 'shopping']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(51.5117389, -0.1452168);
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(51.5117389, -0.1452168),
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
for (i = 0; i < mp.length; i++) {
addMp(mp[i]);
}
}
/**
* Add Main Point Marker
*/
function addMp(marker) {
var pos = new google.maps.LatLng(marker[1], marker[2]);
var content = marker[1];
var icon = {
url: "../images/mp-marker.svg",
scaledSize: new google.maps.Size(60, 60), 
anchor: new google.maps.Point(30, 30) 
};
marker1 = new google.maps.Marker({
position: pos,
map: map,
icon: icon,
zIndex: 9999,
}); 
}

/**
* Function to add markers to map
*/
function addMarker(marker) {
var tip = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var icon = {
url: "../images/map-marker.svg",
scaledSize: new google.maps.Size(30, 30), 
anchor: new google.maps.Point(15, 15) 
};
marker1 = new google.maps.Marker({
title: title,
position: pos,
tip: tip,
map: map,
icon: icon
}); 
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
return function() {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
//map.panTo(this.getPosition());
//map.setZoom(17);
}
})(marker1, content));
}

var tipovi = document.getElementsByClassName('chk-btn').value;
var selectAllChecked = function() {
var checkedPlace = [] 
var allCheckedElem = document.getElementsByName('filter');
for (var i = 0; i < allCheckedElem.length; i++) {
if (allCheckedElem[i].checked == true) {
checkedPlace.push(allCheckedElem[i].value)//creating array of checked items
}
}
filterChecker(checkedPlace) //passing to function for updating markers
}
var filterChecker = function(tip) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
if (in_array(this.marker.tip, tip) != -1) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
function in_array(needle, haystack) {
var found = 0;
for (var i = 0, len = haystack.length; i < len; i++) {
if (haystack[i] == needle) return i;
found++;
}
return -1;
}

.HTML：

<ul class="map-nav">
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Shopping</span>
<input id="shopping-item" type="checkbox" name="filter" value="shopping" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Food and drink</span>
<input id="food-item" type="checkbox" name="filter" value="foodanddrink" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Hotels</span>
<input id="hotels-item" type="checkbox" name="filter" value="hotels" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Culture</span>
<input id="culture-item" type="checkbox" name="filter" value="culture" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
</ul>

Answer 1

如果不希望在选中该复选框之前显示标记，则在选中该复选框之前不要将其添加到地图中。

创建标记时，不要设置map属性。

function addMarker(marker) {
// snip (start of function)
marker1 = new google.maps.Marker({
title: title,
position: pos,
tip: tip,
icon: icon
}); 
// rest of function

当过滤器函数显示标记时，将其添加到地图或从地图中删除它：

var filterChecker = function(tip) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
if (in_array(this.marker.tip, tip) != -1) {
marker.setMap(map);
} else {
marker.setMap(null);
}
}
}

概念验证小提琴

代码片段：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Apple', 51.514227, -0.142056, 'shopping'],
['1', 'Title 1', 51.512424, -0.147783, 'hotels'],
['2', 'Title 2', 51.512164, -0.144521, 'culture'],
['3', 'Title 3', 51.511697, -0.144113, 'foodanddrink'],
['4', 'Title 4', 51.511817, -0.143566, 'shopping']
];
mp = [
['0', 51.512187, -0.144769, 'shopping']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(51.5117389, -0.1452168);
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(51.5117389, -0.1452168),
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
for (i = 0; i < mp.length; i++) {
addMp(mp[i]);
}
}
/**
* Add Main Point Marker
*/
function addMp(marker) {
var pos = new google.maps.LatLng(marker[1], marker[2]);
var content = marker[1];
var icon = {
url: "http://maps.google.com/mapfiles/ms/micons/green.png",
scaledSize: new google.maps.Size(60, 60),
anchor: new google.maps.Point(30, 30)
};
marker1 = new google.maps.Marker({
position: pos,
map: map,
icon: icon,
zIndex: 9999,
});
}
/**
* Function to add markers to map
*/
function addMarker(marker) {
var tip = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var icon = {
url: "http://maps.google.com/mapfiles/ms/micons/blue.png",
scaledSize: new google.maps.Size(30, 30),
anchor: new google.maps.Point(15, 15)
};
marker1 = new google.maps.Marker({
title: title,
position: pos,
tip: tip,
//        map: map,
icon: icon
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
return function() {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
//map.panTo(this.getPosition());
//map.setZoom(17);
}
})(marker1, content));
}
var tipovi = document.getElementsByClassName('chk-btn').value;
var selectAllChecked = function() {
var checkedPlace = []
var allCheckedElem = document.getElementsByName('filter');
for (var i = 0; i < allCheckedElem.length; i++) {
if (allCheckedElem[i].checked == true) {
checkedPlace.push(allCheckedElem[i].value) //creating array of checked items
}
}
filterChecker(checkedPlace) //passing to function for updating markers
}
var filterChecker = function(tip) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
if (in_array(this.marker.tip, tip) != -1) {
marker.setMap(map);
} else {
marker.setMap(null);
}
}
}
// Init map
initialize();
function in_array(needle, haystack) {
var found = 0;
for (var i = 0, len = haystack.length; i < len; i++) {
if (haystack[i] == needle) return i;
found++;
}
return -1;
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas {
height: 70%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<ul class="map-nav">
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Shopping</span>
<input id="shopping-item" type="checkbox" name="filter" value="shopping" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Food and drink</span>
<input id="food-item" type="checkbox" name="filter" value="foodanddrink" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Hotels</span>
<input id="hotels-item" type="checkbox" name="filter" value="hotels" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
<li class="map-nav__item js-fade-in-up">
<label class="switch">
<span>Culture</span>
<input id="culture-item" type="checkbox" name="filter" value="culture" class='chk-btn' onclick="selectAllChecked();">
<div class="slider round"></div>
</label>
</li>
</ul>
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>