一次放下一个标记

Posted 2023-02-23

【中文标题】一次放下一个标记

【英文标题】：Drop One Marker at time

【发布时间】：2014-10-08 01:59:31

【问题描述】：

我正在使用 Google Maps Api v3，我正试图在我的地图上一次放置一个标记，就像 Google Demo 但我无法让它工作，这是我的代码，所有标记都被同时删除时间。

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

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

编辑： 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"
]

【参考方案1】：

在将标记添加到地图时将它们添加到聚类器中 调整边界以在添加标记时显示标记 修复了 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);
            );
        
    );

working fiddle

【讨论】：

感谢您的代码，如果标记未聚集，则效果很好。我首先尝试仅对未聚集的标记进行动画处理，然后，如果用户单击标记组，则对其中的标记进行动画处理。我担心过多的标记动画 onStart 会减慢网站的速度。我正在使用您的 Fiddle 对此进行测试，如果我修复它，我会在这里发布

我试过了，但我不能先为非聚类标记设置动画，并且只有在用户点击它时才为聚类标记设置动画。任何帮助都会很棒。

【参考方案2】：

最初使用这些值创建标记：

   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/