Google Map Placemark Clusters 是否总是在集群之前加载所有地标？

Question

如果问题过于简单，或者这不是发布此问题的正确位置，我深表歉意。只是不知道还能去哪里。

我们正在让一家公司为我们开发一个摄影网站，其中还将包括一张图片位置的全球地图，并带有可点击的地标。因为有成千上万张照片，所以使用地图“集群”地标是有意义的，尤其是在全球、大陆和州级别缩小时——放大得越近就会成为单独的标记。开发人员表示，由于谷歌限制，单个标记首先加载，然后集群成部分。这是有问题的，因为它会减慢网站速度（每个地标都有一个缩略图）。

目前是否没有一种解决方案可以先显示集群表示，然后才“加载”地标，越接近越好？似乎必须有一种方法，无论如何，地标的加载都应该只发生在放大的水平上。

如果最初必须加载所有标记，那么我们可能需要弄清楚如何一次只加载某些区域，以减少网站加载时间。有没有办法将集群分配给区域？在这一点上，开发人员将集群和标记编码到他们的国家，但我们喜欢让它们根据一般位置或区域进行集群的想法。我们想指定地区。例如，如果我们只想对整个地图进行网格化，然后用户单击网格部分 仅查看该部分中的所有地标。

由于这些 Web 开发人员更多的是编码而不是“映射器”，我希望你们中的一些非常聪明的人可能会提出建议。非常感谢提前

萨拉

Answer 1

那不正确（当你的意思是 https://googlemaps.github.io/js-marker-clusterer/docs/reference.html 时）

标记（包括图标....您的缩略图）将不会被加载，直到它的 map-property 将设置为 google.maps.Map-instance。

因此，当您的开发人员不自行设置地图属性并让 MarkerClusterer 仅处理不在集群中且在视口中可见的标记（缩略图）时（包括小偏移) 将被加载。

演示：（创建 500 个标记并在 map-property 更改为 google.maps.Map 时为每个标记计数 1 次。当您查看 developer-console->network 时，您'会看到即使所有这些标记/图标也不会完全加载。对我来说，最初只会请求大约 5-10 个图像）：

function initialize() {
        var goo         = google.maps,
            map         = new goo.Map(document.getElementById('map'), {
                                  zoom: 3,
                                  center: new google.maps.LatLng(0,0),
                                  noClear:true
                          }),
            markers     = [],
            randLatLng  = function(){
                            return new goo.LatLng(((Math.random() * 17000 - 8500)/100),
                                                  ((Math.random() * 36000 - 18000)/100));
                         },
            count       = document.getElementById('count');
        
        map.controls[goo.ControlPosition.TOP_CENTER].push(count);
        
        for (var i = 0; i < 500; i++) {
          
          var marker = new google.maps.Marker({
            position: randLatLng(),
            icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|'+i+'|FF8|000' 
          });
          (function(m){
            var listener=google.maps.event.addListener(m,'map_changed',function(){
            if(this.getMap()===map){
              count.firstChild.data=parseInt(count.firstChild.data,10)+1
              google.maps.event.removeListener(listener);
            }
          });
          }(marker));
          
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);

html,body,#map{height:100%;margin:0;padding:0;}
#count{background:tomato;padding:8px;font:bold 1.3em bold Monospace !important}
#count::after{content:' of 500 markers added to map'}

<div id="map"><div id="count">0</div></div>
  <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer_compiled.js"></script>