Форум

sergofedor06 · #1 (**permalink**) 13.05.2016, 11:26

Приветствую!
Есть такой код, в данном примере он выводит 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>

Dilettante_Pro · #2 (**permalink**) 13.05.2016, 12:33

sergofedor06,
Пример использования
http://www.sitedev.by/blog/google-ma...kerclustererjs
http://webmap-blog.ru/google-maps/kl...-kartax-google
jquery не нужен - чистый js

Dilettante_Pro · #3 (**permalink**) 13.05.2016, 12:38

sergofedor06,
А зачем у вас 4 раза повторяется описание одной и той же функции createMarker?
Достаточно и одного описания - и используй сколько хочешь раз

sergofedor06 · #4 (**permalink**) 13.05.2016, 13:12

А зачем у вас 4 раза повторяется описание одной и той же функции createMarker?
Достаточно и одного описания - и используй сколько хочешь раз

если можно приведите пример как избавится от этих повторений кода

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

Dilettante_Pro · #5 (**permalink**) 13.05.2016, 13:19

sergofedor06,
Просто удалить 2, 3, 4 дубли - оставить только первый

sergofedor06 · #6 (**permalink**) 13.05.2016, 13:27

отлично все вышло

<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)); 
map.addOverlay(createMarker(new GLatLng(41.89616,12.484159), "Описание 2 - маркера", icon));
map.addOverlay(createMarker(new GLatLng(41.893445,12.483258), "Описание 3 - маркера", icon));
map.addOverlay(createMarker(new GLatLng(41.911132,12.48741), "Описание 4 - маркера", icon)); 

}
}

</script>

<div id="map_canvas" style="width: 800px; height: 500px;"></div>

если можно сделайте правку в этом коде, что бы выводило маркеры с кластеризацией!

Dilettante_Pro · #7 (**permalink**) 13.05.2016, 17:48

sergofedor06,
что-то никак не могу найти библиотеку для MarkerClusterer - все, что раньше подключал, недоступно...

Попутно переделал ваш вариант под API V3

<script src="https://maps.google.com/maps/api/js?sensor=false"> </script>
    <script>

        var mark = [{ LatLang: { lat: 41.888014, lng: 12.482378 }, description: "Описание 1 - маркера" },
    { LatLang: { lat: 41.89616, lng: 12.484159 }, description: "Описание 2 - маркера" },
    { LatLang: { lat: 41.893445, lng: 12.483258 }, description: "Описание 3 - маркера" },
    { LatLang: { lat: 41.911132, lng: 12.48741 }, description: "Описание 4 - маркера" }
        ];

        function e() {
            var centerLatLng = { lat: 41.881576, lng: 12.495232 };
            var e = document.getElementById("map"),
            t = {
                center: centerLatLng,
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var gmap = new google.maps.Map(e, t);
            var marker = [], infowindow=[];
            for (i = 0; i < 4; i++) {
                marker[i] = new google.maps.Marker({
                    position: mark[i].LatLang,
                    map: gmap,
                    title: mark[i].description
                });
                marker[i].setMap(gmap);

                infowindow[i] = new google.maps.InfoWindow({
                         content: mark[i].description
                });
                marker[i].id = i;
                marker[i].addListener('click', function () {
                    infowindow[this.id].open(gmap, this);
                });


            }
        //    var markerClusterer = new MarkerClusterer(_this.map, marker,
        //         {
        //          maxZoom: 13,
        //          gridSize: 50,
        //          styles: null
        //     });

        };
        google.maps.event.addDomListener(window, 'load', e);


    </script>
</head>
<body>
    <div id="map" style="width: 800px; height: 500px;">
    </div>
</body>

Dilettante_Pro · #8 (**permalink**) 13.05.2016, 18:10

sergofedor06,
Скачал дистрибутив библиотеки из
https://github.com/googlemaps/js-marker-clusterer
Разместил markerclusterer.js в scripts в корне сайта,
картинки - в images в корне сайта.
В файле markerclusterer.js строки
190 MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PAT H_ =
191 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/' +
192 'images/m';
- удалил строку 191 ( а то обращается по полному пути и не находит. Раньше там же лежали и библиотеки, а теперь ничего не лежит - надо скачивать)

Добавил в код моего примера строку
<script src="scripts/markerclusterer.js"></script>
Раскомментировал в примере строки 38-43

Все работает

sergofedor06 · #9 (**permalink**) 15.05.2016, 13:47

Спасибо конечно, но если честно я ничего не понял!
где этот markerclusterer.js так и не нашел в корне сайта нет папки (scripts)

я взял markerclusterer.js отсюда - https://code.google.com/p/google-map...terer.js?r=360

положил в папку с моим скриптом то что вы правили
добавил
<script src="markerclusterer.js"></script>

то не работает кластеризация вообще!
может я не так делаю, если вы сделали и у вас работает, можете скинуть архив?

sergofedor06 · #10 (**permalink**) 15.05.2016, 13:52

также подключал и эту библиотеку https://github.com/googlemaps/js-mar...erclusterer.js

но толку нет!

Форум

Справочник

Discord чат

Курсы javascript