每次掉一个马克笔

Drop One Marker at time

本文关键字：一个 马克      更新时间：2023-09-26

我正在使用谷歌地图Api v3，我试图在我的地图上一次放下一个标记，就像谷歌演示一样，但我无法让它工作，这是我的代码，所有标记都在同一时间放下。

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

我试着在每个标记上使用超时，但我猜loadMarkers();总是会立刻把它们放下来……

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

有什么建议吗?

编辑: point .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"}
]
  1. 在添加到地图时将标记添加到集群
  2. 调整边界以显示添加的标记
  3. 修复了JSON中的错字(不知道这是否是一个问题)
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);
            });
        }
    });
}
工作小提琴

首先使用以下值创建标记:

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

设置一个用于超时计数器的变量，并在地图缩放发生变化(强制重新集群)时始终重置该变量

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

观察标记的map_changed -事件，当先前的群集标记从群集中移除时应用动画

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/

相关文章：