在 Google 地圖中打開/關閉標記

Question

我是 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);

Answer 1

您可以使用任何 Marker 對象的visible屬性。 例如，調用 toggleBars() 按鈕被按下：

   function toggleBars(){
    bars.forEach(bar => {
        bar.setVisible(!bar.getVisible())
    })
   }