我是JavaScript的新手，刚刚将下面的代码业余组合在一起。它可能有很多问题，但目前看来对我来说很有效。
我正在尝试为标记创建切换按钮，因此有一个按钮显示/隐藏“饮料”标记，一个按钮显示/隐藏“带”标记，依此类推。
var drinks = [
["Drinks Station #3", 51.49811, -0.06743],
["Drinks Station #4", 51.49652, -0.04596],
["Drinks Station #1", 51.50626, -0.01049],
["Drinks Station #2", 51.50726, -0.05505]
];
var bands = [
["<b>West End Musical Choir</b>", 51.50962, -0.05531],
["<b>Gugge 2000</b>", 51.51056, -0.04172],
["<b>Cyclehoop Music Bike</b>", 51.50848, -0.02247],
["<b>Manorfield Primary Steel Band</b>", 51.50682, -0.01061],
["<b>Batala London</b>", 51.50441, -0.01718],
["<b>The Dhol Company</b>", 51.50547, -0.0419],
["<b>South London Jazz Orchestra</b>", 51.49909, -0.05595],
["<b>Pantasy Steel Band</b>", 51.49855, -0.06921],
["<b>The Blend Choir</b>", 51.49617, -0.04101],
["<b>DJ Truck</b>", 51.49536, -0.04538],
["<b>Nostalgia Steel Band</b>", 51.48771, -0.03764],
["<b>Popchoir</b>", 51.48135, -0.02522],
["<b>Hosenbrass (Roaming)</b>", 51.48192, -0.00957]
];
var relay = [
["<b>Relay Exchange #1</b>", 51.50309, -0.01992],
["<b>Relay Exchange #2</b>", 51.50886, -0.03309],
["<b>Relay Exchange #3</b>", 51.49904, -0.05727]
];
var start = [
["<b>The Vitality Big Half Start</b>", 51.50921, -0.0673663]
];
var finish = [
["<b>The Vitality Big Half & The Little Half Finish</b>", 51.48291, -0.00989]
];
function initGoogleMap() {
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: new google.maps.LatLng(51.49789, -0.03441),
styles: [{
elementType: 'geometry',
stylers: [{
color: '#ebe7f0'
}]
}, {
elementType: 'labels.text.stroke',
stylers: [{
visibility: 'off'
}]
}, {
elementType: 'labels.text.fill',
stylers: [{
color: '#DADADA'
}]
}, {
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'administrative.neighborhood',
elementType: 'labels.text.fill',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'administrative.neighborhood',
elementType: 'labels.text.stroke',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
visibility: 'off'
}],
}, {
featureType: 'poi',
elementType: 'labels.icon',
stylers: [{
visibility: 'off'
}],
}, {
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#c2b5d1'
}]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{
color: '#c2b5d1'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{
color: '#c2b5d1'
}]
}, {
featureType: 'transit',
elementType: 'geometry',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{
color: '#000000'
}]
}, {
featureType: 'transit.station.rail',
elementType: 'labels.text.fill',
stylers: [{
color: '#000000'
}]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [{
color: '#d6cde0'
}]
}, {
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#c2b5d1'
}]
}, {
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{
color: '#c2b5d1'
}]
}]
});
var icon = {
url: "icon_link", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconTwo = {
url: "icon_link", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(15, 15) // anchor
};
var iconThree = {
url: "icon_link", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconStart = {
url: "icon_link", // url
scaledSize: new google.maps.Size(36, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(18, 60) // anchor
};
var iconFinish = {
url: "icon_link", // url
scaledSize: new google.maps.Size(36, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(18, 60) // anchor
};
function placeMarker(loc) {
var latLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: icon,
zIndex: 1
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
}
function placeMarkerTwo(loc) {
var latLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconTwo,
zIndex: 1,
type: bands
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
}
function placeMarkerThree(loc) {
var latLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconThree,
zIndex: 1
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
}
function placeMarkerStart(loc) {
var latLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconStart,
zIndex: 1
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
}
function placeMarkerFinish(loc) {
var latLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconFinish,
zIndex: 1,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
}
for (var i = 0; i < drinks.length; i++) {
placeMarker(drinks[i]);
}
for (var i = 0; i < bands.length; i++) {
placeMarkerTwo(bands[i]);
}
for (var i = 0; i < relay.length; i++) {
placeMarkerThree(relay[i]);
}
for (var i = 0; i < start.length; i++) {
placeMarkerStart(start[i]);
}
for (var i = 0; i < finish.length; i++) {
placeMarkerFinish(finish[i]);
}
var ctaLayer = new google.maps.KmlLayer(
'route_Link', {
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
var ctaLayer = new google.maps.KmlLayer(
'Park_Link', {
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
}
google.maps.event.addDomListener(window, 'load', initGoogleMap);
答案 0 :(得分：0)
您可以使用任何Marker对象的visible属性。例如，调用toggleBars（）按下一个按钮：
function toggleBars(){
bars.forEach(bar => {
bar.setVisible(!bar.getVisible())
})
}