一次放下一个标记 [英] Drop One Marker at time

问题描述

我正在使用Google Maps Api v3，并且试图一次在我的地图上放置一个标记，就像

I'm using Google Maps Api v3 and I'm trying to drop one marker at time on my Map, just like Google Demo but I could not get it to work, here's my code, all markers are dropped at same time.

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();

我尝试在每个Marker上使用超时，但是我猜想loadMarkers();总是会立刻放下它们...

I tried do use a Timeout on each Marker but i guess that loadMarkers(); will always drop them at once...

    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);

关于如何解决此问题的任何想法?

Any ideas on how could I fix this ?

编辑:poi.php文件列出了我表中的所有点，并像这样输出它们:

The poi.php file list all points from my Table and Output them like this:

[
{"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"}
]

推荐答案

最初使用以下值创建标记:

Initially create the marker with these values:

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

设置一个用于超时的计数器变量，并始终在地图的缩放变化时重置此变量(这将强制重新聚集)

set a variable used for the counter for the timeout, and always reset this vaiable when the zoom of the map changes(what forces a re-clustering)

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

观察标记的map_changed事件以在从群集中删除以前的群集标记时应用动画

observe the map_changed-event of the markers to apply the animation when a previous clustered marker has been removed from a cluster

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)
        }
      }


});

结果: http://jsfiddle.net/doktormolle/9jaLqpfd/

Result: http://jsfiddle.net/doktormolle/9jaLqpfd/

这篇关于一次放下一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！