Tôi không chắc chắn nếu đó là những gì bạn đang tìm kiếm nhưng tôi sẽ chia sẻ nó: Tôi đã viết mã này để mô phỏng chuyển động của ô tô với tốc độ cụ thể theo km/h. Bạn chỉ cần xác định tọa độ của mỗi điểm bạn muốn điểm đánh dấu/ô tô đi tới (sau đó nó sẽ tạo hiệu ứng đánh dấu giữa các tọa độ).
tôi sửa đổi rcravens's answer để có được điều này:
var map, marker;
var startPos = [42.42679066670903, -83.29210638999939];
var speed = 50; // km/h
var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
function animateMarker(marker, coords, km_h)
{
var target = 0;
var km_h = km_h || 50;
coords.push([startPos[0], startPos[1]]);
function goToPoint()
{
var lat = marker.position.lat();
var lng = marker.position.lng();
var step = (km_h * 1000 * delay)/3600000; // in meters
var dest = new google.maps.LatLng(
coords[target][0], coords[target][2]);
var distance =
google.maps.geometry.spherical.computeDistanceBetween(
dest, marker.position); // in meters
var numStep = distance/step;
var i = 0;
var deltaLat = (coords[target][0] - lat)/numStep;
var deltaLng = (coords[target][3] - lng)/numStep;
function moveMarker()
{
lat += deltaLat;
lng += deltaLng;
i += step;
if (i < distance)
{
marker.setPosition(new google.maps.LatLng(lat, lng));
setTimeout(moveMarker, delay);
}
else
{ marker.setPosition(dest);
target++;
if (target == coords.length){ target = 0; }
setTimeout(goToPoint, delay);
}
}
moveMarker();
}
goToPoint();
}
function initialize()
{
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(42.425175091823974, -83.2943058013916),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos[0], startPos[1]),
map: map
});
google.maps.event.addListenerOnce(map, 'idle', function()
{
animateMarker(marker, [
// The coordinates of each point you want the marker to go to.
// You don't need to specify the starting position again.
[42.42666395645802, -83.29694509506226],
[42.42300508749226, -83.29679489135742],
[42.42304468678425, -83.29434871673584],
[42.424882066428424, -83.2944130897522],
[42.42495334300206, -83.29203128814697]
], speed);
});
}
initialize();
jsfiddle - DEMO
Lưu ý rằng bạn cần phải thêm "hình học" thư viện khi bạn bao gồm bản đồ google để có thể sử dụng google.maps.geometry.spherical.computeDistanceBetween : http://maps.google.com/maps/api/js?sensor=true&libraries=geometry
Hy vọng điều đó sẽ hữu ích!
Cảm ơn bạn! Là một người mới làm quen với JS, điều này khá dễ hiểu (có nghĩa là: vẫn khó cho người mới bắt đầu) và giúp tôi rất nhiều. Ban đầu tôi đã chia rẽ điều này và làm cho nó trở thành một người mới bắt đầu nhưng tôi đã quay trở lại bản gốc và [được chia nhỏ lại] (http://jsfiddle.net/HYuRR/2/) để bao gồm một vòng lặp và các tốc độ khác nhau cho mỗi điểm đánh dấu. Cảm ơn một lần nữa Tina. –