在 Google Maps API 中切換標記組

Question

我在地圖上有幾組（“狀態”）標記，我希望能夠在不重新加載頁面的情況下切換它們的可見性。

我發現有很多標記組的變體，但它們似乎都不適用於這個 google api 版本。

這是 HTML

<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled
<div id="map" style="height:800px;"></div>

這是javascript

<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 6,
        center: {lat: 54.3266311, lng: -2.7585563},
        mapTypeId: 'roadmap'
    });

    var infoWin = new google.maps.InfoWindow();

    var markers = locations.map(function(location, i) {
        var marker = new google.maps.Marker({
            position: location,
            icon: 'https://maps.google.com/mapfiles/kml/'+location.type,
        });
        google.maps.event.addListener(marker, 'click', function(evt) {
            infoWin.setContent(location.info);
            infoWin.open(map, marker);
        })
        return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
            minimumClusterSize: 2,
            maxZoom: 4,
            zoomOnClick: false
        }
    );
}

var locations = [{lat:53.750503,lng:-2.429168,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199925"},{lat:51.290162,lng:-0.833112,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 76669845"},{lat:51.301737,lng:0.051969,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199930"},{lat:50.525378,lng:-3.594341,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875603"},{lat:51.581895,lng:-0.724800,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78581052"},{lat:50.391133,lng:-4.072097,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78106941"},{lat:51.318527,lng:-1.021035,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78396115"},{lat:50.443925,lng:-3.561630,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875582"},{lat:53.625107,lng:-2.337432,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80444510"},{lat:52.432582,lng:-2.026563,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80423141"}]

任何幫助都會很棒:) 我不介意擺脫集群，我只是不知道如何去做！

Answer 1

您可以在標記類中使用setVisible函數，如下所示：

for (var i in markersToHide) {
    markersToHide[i].setVisible(true);
}

// if markers are inside a cluster
markerCluster.repaint();

Answer 2

1. HTML 元素 ID 必須是唯一的，您的所有復選框當前都具有相同的 ID。

<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled

通常這就是“名稱”的用途（允許相同），因此您可以這樣做：

<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled

2. 然后當單擊復選框時，處理標記數組，適當地設置visible屬性：

    google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
    google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
    google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
    google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);

   function clickListener() {
       var typeId = this.id;
       var type;
       for (var i=0; i<iconMapping.length;i++) {
         if (iconMapping[i].state==typeId)
           type = iconMapping[i].icon;
       }
       var markers = markerCluster.getMarkers();
       for (var i=0; i<markers.length; i++) {
          if (markers[i].getIcon().includes(type)) {
             markers[i].setVisible(this.checked);
          }
       }
    }
}
// your example doesn't include examples for Active/Scheduled, if they are 
// duplicates of existing marker icons, a different approach will need to be used.
var iconMapping = [
{icon:'ylw-square-lv.png',state:'Backlog'},
{icon:'blu-square-lv.png',state:'Active'}
];

概念證明小提琴

（如果您希望集群反映當前可見的圖標，則需要更新傳遞給它的標記數組，而不是標記的visible屬性）。

代碼片段：

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: { lat: 54.3266311, lng: -2.7585563 }, mapTypeId: 'roadmap' }); var infoWin = new google.maps.InfoWindow(); var markers = locations.map(function(location, i) { var marker = new google.maps.Marker({ position: location, icon: 'https://maps.google.com/mapfiles/kml/' + location.type, }); google.maps.event.addListener(marker, 'click', function(evt) { infoWin.setContent(location.info); infoWin.open(map, marker); }) return marker; }); var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', minimumClusterSize: 2, maxZoom: 4, zoomOnClick: false }); google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener); google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener); google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener); google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener); function clickListener() { var typeId = this.id; var type; for (var i = 0; i < iconMapping.length; i++) { if (iconMapping[i].state == typeId) type = iconMapping[i].icon; } var markers = markerCluster.getMarkers(); for (var i = 0; i < markers.length; i++) { if (markers[i].getIcon().includes(type)) { markers[i].setVisible(this.checked); } } } } var iconMapping = [{ icon: 'ylw-square-lv.png', state: 'Backlog' }, { icon: 'blu-square-lv.png', state: 'Active' } ]; var locations = [{ lat: 53.750503, lng: -2.429168, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 75199925" }, { lat: 51.290162, lng: -0.833112, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 76669845" }, { lat: 51.301737, lng: 0.051969, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 75199930" }, { lat: 50.525378, lng: -3.594341, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 78875603" }, { lat: 51.581895, lng: -0.724800, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 78581052" }, { lat: 50.391133, lng: -4.072097, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 78106941" }, { lat: 51.318527, lng: -1.021035, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 78396115" }, { lat: 50.443925, lng: -3.561630, type: '/paddle/ylw-square-lv.png', state: 'Backlog', info: "<strong>Order ID:</strong> 78875582" }, { lat: 53.625107, lng: -2.337432, type: '/paddle/blu-square-lv.png', state: 'Active', info: "<strong>Order ID:</strong> 80444510" }, { lat: 52.432582, lng: -2.026563, type: '/paddle/blu-square-lv.png', state: 'Active', info: "<strong>Order ID:</strong> 80423141" }]

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

 <!DOCTYPE html> <html> <head> <title>Marker Clustering</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script> <!-- jsFiddle will insert css and js --> </head> <body> <input type="checkbox" name="state" id="Backlog" checked> Backlog <input type="checkbox" name="state" id="Breached" checked> Breached <input type="checkbox" name="state" id="Active" checked> Active <input type="checkbox" name="state" id="Scheduled" checked> Scheduled <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async></script> </body> </html>