在 Google 地图 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

您可以像这样在标记 class 中使用 setVisible 函数：

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

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

Answer 2

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

然后当复选框被点击时，处理标记数组，适当地设置 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'}
];

proof of concept fiddle

（如果你想让簇反映当前可见的图标，你将需要更新传递给它的标记数组，而不是标记的 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://unpkg.com/@google/markerclustererplus@4.0.1/images/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>

如果你想让集群反映可见标记的数量，你需要更改代码以更新 MarkerClusterer:

中的标记数组

function clickListener() {
   var typeId = this.id;
   var type;
   var visibleMarkers = [];
   for (var i=0; i<iconMapping.length;i++) {
     if (iconMapping[i].state==typeId)
       type = iconMapping[i].icon;
   }
   for (var i=0; i<markers.length; i++) {
      if (markers[i].getIcon().includes(type)) {
         markers[i].setVisible(this.checked);
      }
      if (markers[i].getVisible())
        visibleMarkers.push(markers[i]);
   }
   markerCluster.clearMarkers();
   markerCluster.addMarkers(visibleMarkers);
}

proof of concept fiddle

代码片段：

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://unpkg.com/@google/markerclustererplus@4.0.1/images/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;
    var visibleMarkers = [];
    for (var i = 0; i < iconMapping.length; i++) {
      if (iconMapping[i].state == typeId)
        type = iconMapping[i].icon;
    }
    console.log("click type=" + type)
    for (var i = 0; i < markers.length; i++) {
      console.log("markers[" + i + "] icon=" + markers[i].getIcon() + " map=" + markers[i].getMap() + "visible=" + markers[i].getVisible());
      if (markers[i].getIcon().includes(type)) {
        markers[i].setVisible(this.checked);
        console.log("markers[" + i + "] map=" + markers[i].getMap() + " visible=" + markers[i].getVisible())
      }
      if (markers[i].getVisible())
        visibleMarkers.push(markers[i]);
    }
    markerCluster.clearMarkers();
    console.log("after clear:" + markerCluster.getMarkers().length)
    markerCluster.addMarkers(visibleMarkers);
    console.log("after add:" + markerCluster.getMarkers().length)

  }
}
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&v=weekly&channel=2" async></script>
</body>

</html>

在 Google 地图 API 中切换标记组

Toggle groups of markers in Google Maps API

javascript

google-maps