Używam Google Maps API V3 i próbuję upuścić jeden znacznik na czas na mojej mapie, tak jak Google Demo ale nie mogłem go uruchomić, oto mój kod, wszystkie markery są upuszczane w tym samym czasie.

var map;
var markers = [];

function initialize() { 
    var latlng = new google.maps.LatLng(52.520816, 13.410186);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), options);
}

initialize();

function loadMarkers() {  

    $.ajax({
       url: 'js/poi.php',
       type: 'GET',
       dataType : "json",
       success: function (data) {

            var latlngbounds = new google.maps.LatLngBounds();      


            $.each(data, function(index, point) {

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(point.Lat, point.Lng),
                    animation: google.maps.Animation.DROP,
                    icon: 'img/marker.png'

                });


                markers.push(marker);
                latlngbounds.extend(marker.position);

            });

            var markerCluster = new MarkerClusterer(map, markers);
            map.fitBounds(latlngbounds);

        }

    });
}

loadMarkers();

Próbowałem użyć limitu czasu na każdy znacznik, ale myślę, że ładowanie (); zawsze będzie ich upuść raz ...

    setTimeout(function() {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(point.Lat, point.Lng),
            animation: google.maps.Animation.DROP,
            icon: 'img/marker.png'

        });

    }, point.Id * 200);

Jakieś pomysły na jak mogłem to naprawić?

Edytuj: Lista plików POI.php

[
{"Id":"1","Lat":"52.511467","Lgn":"13.447179"},
{"Id":"2","Lat":"52.549061","Lgn":"13.422975"},
{"Id":"3","Lat":"52.497622","Lgn":"13.396110"},
{"Id":"4","Lat":"52.517683","Lgn":"13.394393"}
]
0
suicidebilly 14 sierpień 2014, 16:06

2 odpowiedzi

Najlepsza odpowiedź

Początkowo utwórz marker z tymi wartościami:

   var marker = new google.maps.Marker({
            position: new google.maps.LatLng(point.Lat, point.Lng),
            map: null,
            visible:false
    });

Ustaw zmienną używaną do licznika na limit czasu i zawsze resetować tę zmienną, gdy zoom zmienia się mapy (co wymusza grupowanie)

google.maps.event.addListener(map,'zoom_changed',function(){
  this.set('counter',0);
})

Obserwuj map_changed - zdarzenie markerów do zastosowania animacji, gdy poprzedni klassowy marker został usunięty z klastra

google.maps.event.addListener(marker,'map_changed',function(){
      var marker=this,map=this.getMap();
      //the marker has been clustered
      if(!this.getMap()){     
        this.setValues({visible:false});
      }
      //the marker is not a part of a cluster
      else{
        //the marker has been clustered before, set visible and animation with a delay
        if(!this.getVisible()){
            var counter=this.getMap().get('counter')+1;
            //set the new counter-value
            this.getMap().set('counter',counter);
            setTimeout(function(){marker.setValues({animation:google.maps.Animation.DROP,
                                                    visible:true});},
                       200*counter)
        }
      }


});

Wynik: http://jsfiddle.net/doktormolle/9Jalqpfd/

1
Dr.Molle 14 sierpień 2014, 23:37
  1. Dodaj znaczniki do klastera, ponieważ są one dodawane do mapy
  2. Dostosuj granice, aby pokazać znaczniki, gdy są one dodane
  3. Naprawiono liternik w swoim JSON (nie wiem, czy to problem lub nie)
function initialize() {
    var latlng = new google.maps.LatLng(52.520816, 13.410186);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), options);
    loadMarkers();
}

function loadMarkers() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        data: {
            json: JSON.stringify(jsonData)
        },
        delay: 3,
        success: function (data) {
            var markerCluster = new MarkerClusterer(map, markers);
            var latlngbounds = new google.maps.LatLngBounds();
            $.each(data, function (index, point) {
                    setTimeout(function() {
                      var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(point.Lat, point.Lng),
                        animation: google.maps.Animation.DROP,
                        map: map /* don't have your custom marker
                        icon: 'img/marker.png'*/
                      });
                      markerCluster.addMarker(marker);
                      markers.push(marker);
                      // adjust the bounds to show all the markers
                      latlngbounds.extend(marker.getPosition());
                      map.fitBounds(latlngbounds);
                    }, point.Id * 200);
            });
        }
    });
}

skrzypce robocze

2
geocodezip 20 maj 2019, 22:24