Всегда ли кластеры меток Google Map загружают все метки перед кластеризацией?

Я извиняюсь, если вопрос упрощен, или если это не правильное место, чтобы отправить это. Просто не уверен, куда еще идти.

У нас есть компания, которая разрабатывает для нас веб-сайт, посвященный фотографии, который также будет включать в себя всемирную карту расположения изображений с кликабельными метками. Поскольку есть тысячи фотографий, имеет смысл иметь метки "кластеризованных" на карте, особенно при уменьшении масштаба на глобальном, континентальном уровне и уровне штатов - чтобы отдельные маркеры становились ближе при увеличении масштаба. Разработчик указал, что из-за Google ограничение, отдельные маркеры ВСЕ загружают в первую очередь, ТО кластер в разделы. Что проблематично тем, что замедляет работу сайта (у каждой метки есть уменьшенное изображение).

Разве не существует текущего решения, которое сначала показывало бы кластерные представления, а затем только "загружало" метки по мере приближения? Кажется, должен быть способ, которым загрузка меток должна происходить только на увеличенных уровнях в любом случае.

Если все маркеры действительно должны загружаться изначально, то нам, вероятно, нужно выяснить, как загружать только определенные регионы за один раз, чтобы сократить время загрузки сайта. Есть ли способ назначить кластеры на регионы? На данный момент разработчик имеет кластеры и маркеры, закодированные в их странах, но нам нравится идея позволить им кластеризоваться из-за местоположения в целом или регионов. Мы хотели бы указать регионы. Например, если мы хотим просто создать сетку всей карты, а затем пользователь нажимает на раздел сетки, чтобы просмотреть все метки только в этом разделе.

Так как эти веб-разработчики - больше программисты, чем "картографы", я надеялся, что у некоторых из вас, очень умных людей, могут быть предложения. Спасибо заранее

Сара

1 ответ

Решение

Это не правильно (когда вы имеете в виду https://googlemaps.github.io/js-marker-clusterer/docs/reference.html)

Маркер (включая значок.... ваш эскиз) не будет загружен до map свойство будет установлено на google.maps.Map -пример.

Поэтому, когда ваши разработчики не установят свойство map-объекта самостоятельно и позволят MarkerClusterer обрабатывать свойство-map, будут отображаться только те маркеры (миниатюры), которые не находятся в кластере и видны в области просмотра (включая небольшое смещение). загружен.

Демо: (создает 500 маркеров и считает 1 раз для каждого маркера, когда map изменения в google.maps.Map, Когда вы посмотрите на 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>

Другие вопросы по тегам