0

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

            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>

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

1 ответ 1

0

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

        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);//відображаємо маркери
                }
            });
        });


      }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.