не работает Кластеризация маркеров Google maps

305

04 декабря 2017, 18:49

Привет всем. Подключаю гугл карту, на которой расположено несколько точек, точки выводятся, а вот сделать кластеризацию не могу. Нечего не происходит, в консоли ошибок нет. Вот код:

            var map; 
            var markers = []; 
            var indexMarkersHospital = []; 
            var indexMarkersBanks = []; 
            var indexMarkersStation = []; 
             
            function addNewMarker(data) 
            { 
                var marker = new google.maps.Marker({ 
                    position: {lat: parseFloat(data['lat']), lng: parseFloat(data['lng'])}, 
                    map: map 
                }); 
                 
                if(data['img']) 
                { 
                    marker.setIcon(data['img']); 
                } 
                 
                if(data['information']) 
                { 
                    var information = new google.maps.InfoWindow({ 
                        content: data['information'] 
                    }); 
                    marker.addListener('click', function(){ 
                        information.open(map, marker); 
                    }); 
                } 
                 
                 
                switch (parseInt(data['type'], 10)) { 
                  case 1: 
                     indexMarkersHospital.push(markers.length); 
                    break; 
                  case 2: 
                     indexMarkersBanks.push(markers.length); 
                    break; 
                  case 3: 
                     indexMarkersStation.push(markers.length); 
                    break; 
                } 
                 
                markers.push(marker); 
            } 
             
            function getMarkers(typeMarkers = []) 
            { 
                $.ajax({ 
                    method: "POST", 
                    url: "ajaxMarkers.php", 
                    data: { typeMarkers: typeMarkers } 
                }) 
                .done(function( data ) { 
                    var dataMarkers = JSON.parse(data);  
                    dataMarkers.forEach( function (el) { 
                        addNewMarker(el); 
                    }); 
                }); 
            } 
             
            function setMapOnAll(map, typeMarkers) { 
                switch (parseInt(typeMarkers, 10)) { 
                  case 1: 
                       
                    indexMarkersHospital.forEach( function (el) { 
                        markers[el].setMap(map); 
                    }); 
                    break; 
                  case 2: 
                    indexMarkersBanks.forEach( function (el) { 
                        markers[el].setMap(map); 
                    });                     
                    break; 
                  case 3: 
                    indexMarkersStation.forEach( function (el) { 
                        markers[el].setMap(map); 
                    });                     
                    break; 
                } 
            } 
       
            function initMap() 
            { 
                var element = document.getElementById('map'); 
                var option = { 
                    zoom: 15, 
                    center: {lat: 49.84392946, lng: 24.02629763} 
                } 
 
                map = new google.maps.Map(element, option); 
                var typeMarkers = [1, 2, 3]; //typeMarkers: 1 - лікарні, 2 - банки, 3 - вокзали 
                getMarkers(typeMarkers); 
                 
                $("input[name='marker']").on('click', function(event){ 
                    var el = event.target || event.srcElement; 
                     
                    if(!$("form#markers input[value='"+el.value+"']").is(':checked')) 
                    { 
                        setMapOnAll(null, el.value);//скриваємо маркери 
                    } else { 
                        setMapOnAll(map, el.value);//відображаємо маркери 
                    } 
                }); 
                var mc = new MarkerClusterer(map); 
            }

Библиотеку подключил:

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

Помогите пожалуйста.

Answer 1

Код переделал, кластеризация работает.

        var map; 
        var globalMarkers = []; 
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
        var indexMarkersHospital = []; 
        var indexMarkersBanks = []; 
        var indexMarkersStation = [];  
        
        function setMapOnAll(map, typeMarkers) { 
            switch (parseInt(typeMarkers, 10)) { 
              case 1: 
 
                indexMarkersHospital.forEach( function (el) { 
                    globalMarkers[el].setMap(map); 
                }); 
                break; 
              case 2: 
                indexMarkersBanks.forEach( function (el) { 
                    globalMarkers[el].setMap(map); 
                });                     
                break; 
              case 3: 
                indexMarkersStation.forEach( function (el) { 
                    globalMarkers[el].setMap(map); 
                });                     
                break; 
            } 
        } 
             
      function initMap() { 
           
        map = new google.maps.Map(document.getElementById('map'), { 
          zoom: 15, 
          center: {lat: 49.84392946, lng: 24.02629763} 
        }); 
 
        var typeMarkers = [1, 2, 3]; //typeMarkers: 1 - лікарні, 2 - банки, 3 - вокзали 
        $.ajax({ 
            method: "POST", 
            url: "ajaxMarkers.php", 
            data: { typeMarkers: typeMarkers } 
        }) 
        .done(function( data ) { 
            var dataMarkers = JSON.parse(data);  
             
            var markers = dataMarkers.map(function(data, i) { 
                var marker = new google.maps.Marker({ 
                  position: {lat: parseFloat(data['lat']), lng: parseFloat(data['lng'])}, 
                  label: labels[i % labels.length] 
                }); 
                 
                if(data['img']) 
                { 
                    marker.setIcon(data['img']); 
                } 
                 
                if(data['information']) 
                { 
                    var information = new google.maps.InfoWindow({ 
                        content: data['information'] 
                    }); 
                    marker.addListener('click', function(){ 
                        information.open(map, marker); 
                    }); 
                } 
                 
                  switch (parseInt(data['type'], 10)) { 
                    case 1: 
                       indexMarkersHospital.push(globalMarkers.length); 
                      break; 
                    case 2: 
                       indexMarkersBanks.push(globalMarkers.length); 
                      break; 
                    case 3: 
                       indexMarkersStation.push(globalMarkers.length); 
                      break; 
                  } 
 
                  globalMarkers.push(marker); 
             
                return marker; 
              }); 
                   
             var markerCluster = new MarkerClusterer(map, markers, 
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
             
            $("input[name='marker']").on('click', function(event){ 
                var el = event.target || event.srcElement; 
 
                if(!$("form#markers input[value='"+el.value+"']").is(':checked')) 
                { 
                    setMapOnAll(null, el.value);//скриваємо маркери 
                } else { 
                    setMapOnAll(map, el.value);//відображаємо маркери 
                } 
            }); 
        }); 
 
 
      }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вызов метода класса с помощью setInterval

Здравствуйте, вопрос у меня такой, ну изменять позицию экземпляра класса, есть метод Move, который изменяет позицию, хочу вызвать его с определённой...

250

javascript