Google Maps MarkerCluster API：如何在屏幕视图之外获取集群？答案

【问题标题】：Google Maps MarkerCluster API: How to get clusters outside of screen's view?Google Maps MarkerCluster API：如何在屏幕视图之外获取集群？
【发布时间】：2017-01-04 22:38:36
【问题描述】：

我有一个使用 Google 地图和 MarkerCluster API 的网页。我需要能够以给定的缩放级别获取地图上的所有集群。以这段代码为例：

//Where the center of the screen will be
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  //Google map type
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

//Create the google map
var map = new google.maps.Map(document.getElementById("map"), options);
//Create the marker clusters, where markers is an array of lat and longs
var mc = new MarkerClusterer(map, markers);
//Print all of the clusters at zoom level 13
console.log(mc.getTotalClusters());

问题是如果缩放级别为 13 时有 10 个集群，但只有 7 个在我的屏幕范围内，那么上面的代码只会打印出 7 个。我需要一种方法来访问 all em> 簇，即使它们不在屏幕上。

MarkerClusterer 工作原理的简单示例： https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html

以下是对 MarkerCluster API 的一些引用：

https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

https://googlemaps.github.io/js-marker-clusterer/docs/examples.html

https://developers.google.com/maps/articles/toomanymarkers

【问题讨论】：

标签： javascript google-maps markerclusterer

【解决方案1】：

确实，getTotalClusters 函数仅返回当前视口中可见标记的簇数。

获取集群总数的一个选项是通过覆盖创建集群的函数来禁用检查标记是否位于当前视口内：

MarkerClusterer.prototype.createClusters_ = function() {
  if (!this.ready_) {
    return;
  }

  for (var i = 0, marker; marker = this.markers_[i]; i++) {
    //if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {    
    if (!marker.isAdded) {    
      this.addToClosestCluster_(marker);
    }
  }
};

工作示例

MarkerClusterer.prototype.createClusters_ = function() {
  if (!this.ready_) {
    return;
  }

  for (var i = 0, marker; marker = this.markers_[i]; i++) {
    //if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {    
    if (!marker.isAdded) {    
      this.addToClosestCluster_(marker);
    }
  }
};


function initMap(data) {
    var center = new google.maps.LatLng(59.339025,18.065818);

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

 
    var markers = [];
    for (var i = 0; i < data.photos.length; i++) {
        var dataPhoto = data.photos[i];
        var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
        var marker = new google.maps.Marker({
            position: latLng
        });
        markers.push(marker);
    }
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });

    google.maps.event.addListenerOnce(map, 'idle', function(){
        console.log("Total number of clusters: " + markerCluster.getTotalClusters());
    });
}
google.maps.event.addDomListener(window, 'load', 
function(){
    $.getJSON("https://gist.githubusercontent.com/vgrem/fb601469049c4be809ad4ea4bbcdc381/raw/data.json")
    .success(function(data) {
        initMap(data);
    });    
});

body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div id="map-container"><div id="map"></div></div>

Plunker

【讨论】：