Question

我正在使用谷歌地图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();

我试过在每个Marker上使用Timeout但是我想那个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"}
]

Answer 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

Answer 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/

一次丢下一个标记

2 个答案: