将Google地图上的标记从1个地方平滑移动到另一个地方

Question

我在下面的代码中使用过这部分只是它的一部分

流程为-0->

1）（.markerClusterer.markers_）中有1个标记，第一个标记进入循环得到Current＆amp;改变位置＆amp;进入过渡功能＆amp;设置好的位置

2）但问题是当我在（.markerClusterer.markers_）中推出2个标记时，标记少了1步，即g的值受影响不知道为什么但是根据我添加的1个标记不应该影响它

我已经尝试了很多但找不到任何解决方案。

function markClusterToShowById(id, position, text) {
    for (markers = that.markerClusterer.markers_, i = 0; i < markers.length; i++) {

    var marker = markers[i];
    if (marker.id2 == id2) {

        var currentPosition_lat = marker.getPosition().lat(),
        currentPosition_long = marker.getPosition().lng()
        new_lat = position.lat(),
        new_long = position.lng();
        var new_loc = [new_lat, new_long];
        var prev_loc = [currentPosition_lat, currentPosition_long];

       transition(new_loc, prev_loc, marker );

            break
    }
    }
    return result
}



function transition(new_loc, prev_loc, marker){
    g = 1;
    deltaLat = (new_loc[0] - prev_loc[0])/4;
    deltaLng = (new_loc[1] - prev_loc[1])/4;

    moveMarker(prev_loc, deltaLat, deltaLng, marker);
}

function moveMarker(prev_loc, deltaLat, deltaLng, marker){
    prev_loc[0] += deltaLat;
    prev_loc[1] += deltaLng;
    var latlng = new google.maps.LatLng(prev_loc[0], prev_loc[1]);
    marker.setPosition(latlng);

    if(g!=4){
    g++;
    setTimeout(function() {
    moveMarker(prev_loc, deltaLat, deltaLng, marker);
    }, 10)

    }
}

Answer 1

您可以尝试按照Google for Marker Clustering的实施方式进行操作。

代码：

<div id="map-container"><div id="map"></div></div>
<script src="markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(51.5074, 0.1278);

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.5074, 0.1278)
});
markers.push(marker);

var options = {
imagePath: 'images/m'
};

var markerCluster = new MarkerClusterer(map, markers, options);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

如果您要检查Marker Clusterer Sample链接，您将看到标记分组和取消分组的平滑过渡。

希望这有帮助

的参考文献：

MarkerClusterer for Google Maps v3

Marker Clusterer – A Google Maps JavaScript API utility library

Marker Clusterer Sample