Показать сообщение отдельно
  #1 (permalink)  
Старый 13.05.2016, 11:26
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Вывод нескольких маркеров на карте и кластеризация
Приветствую!
Есть такой код, в данном примере он выводит 4 маркера на карте
все работает исправно, но есть проблема если таких маркеров я добавлю много то будет смотреться
плохо.

Для этого мне нужна кластеризация этих маркеров, помогите примером кто сталкивался с этим
я в курсе что нужна библиотека
markerclusterer.js
и возможно
jquery.min.js

нужна такая кластерезация маркеров как тут




<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2"></script>
<body onload="showMap();" onunload="GUnload()">


<script type="text/javascript">

function showMap()
{
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map_canvas"));  
map.addControl(new GLargeMapControl());	  
map.addControl(new GMapTypeControl());          
map.setCenter(new GLatLng(41.881576,12.495232), 6);  
var icon = new GIcon();
icon.image = "http://mapszoom.com/temp/map/img/location.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 6);
icon.infoWindowAnchor = new GPoint(1, 1);




function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description, icon);
});
return marker;
}

map.addOverlay(createMarker(new GLatLng(41.888014,12.482378), "Описание 1 - маркера", icon)); 




function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(description, icon);
});
return marker;
}
  
map.addOverlay(createMarker(new GLatLng(41.89616,12.484159), "Описание 2 - маркера", icon));




function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(description, icon);
});
return marker;
}
     
map.addOverlay(createMarker(new GLatLng(41.893445,12.483258), "Описание 3 - маркера", icon));




function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(description, icon);
});
return marker;
}
        
map.addOverlay(createMarker(new GLatLng(41.911132,12.48741), "Описание 4 - маркера", icon)); 


}
}

</script>

<div id="map_canvas" style="width: 800px; height: 500px;"></div>
Ответить с цитированием