在 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())
    })
   }