Клавиши метки метки Google всегда загружают все метки перед кластеризацией?

Question

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

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

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

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

Поскольку эти веб-разработчики больше кодеров, чем «mappers», я надеялся, что некоторые из вас очень умные люди могут иметь предложения. Большое спасибо заранее

Сара

Answer 1

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

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

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

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