Question

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

我们正在为一家公司开发一个摄影网站，该网站还将包含图片位置的全球地图，以及可点击的地标。因为有数千张照片，所以有地图“群集”地标是有意义的，特别是在全球，大陆和州级别缩小时 - 成为单独的标记，你放大的距离越近。开发人员已表示，由于谷歌限制，个别标记ALL首先加载，然后组成部分。这是有问题的，因为它减慢了网站的速度（每个地标都有缩略图）。

那里是否有一个当前的解决方案只能首先显示群集表示，然后只有“加载”地标你越近？似乎必须有一种方法，加载地标应该只在放大的水平发生。

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

由于这些网络开发人员比“地图绘制者”更多的编码员，我希望你们中的一些非常聪明的人可能有建议。非常感谢提前

萨拉

Answer 1

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

标记（包括图标....缩略图）在map - 属性设置为google.maps.Map - 实例之前不会加载。

因此，当您的开发人员不自行设置map属性时，让MarkerClusterer只处理map-property（标记），这些标记不在群集中且在视口中可见（包括将加载小偏移量。

演示：（当map - 属性更改为google.maps.Map时，为每个标记创建500个标记并计算1次。当您查看开发人员控制台时 - ＆gt;网络您将看到即使所有这些标记/图标也不会被完全加载。对我来说，最初只会要求约5-10张图片）：

＆＃13;

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);

＆＃13;

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'}

＆＃13;

<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>

＆＃13;

Google Map地标群集是否始终在群集之前加载所有地标？

1 个答案: