ルートに沿ってカスタムGoogleマップマーカーをアニメーション化する方法
JavaScriptとGoogle Maps APIを使用してハンドヘルドデバイス用の小さなアプリケーションを作成しましたが、タイマー機能を使用して、マーカーアイコンをルート上の地図上の任意の場所に移動する必要があります。男のアイコンがあり、地図上で自動的に移動する必要があります。これどうやってするの？
かなりクールな例がここにあります：
残念ながら、公式のGMapsコレクションには自動マーカー移動機能はありません。
ただし、GRouteがある場合は、ポイントのセットがあることを意味します。ルートステップをループするには、次のようなものを使用できます。
for (var c = 0; c < yourroute.getNumSteps(); c++) {
yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
}
もちろん、タイマーを使用して非同期にこれを実行する必要があります。
function moveToStep(yourmarker,yourroute,c) {
if {yourroute.getNumSteps() > c) {
yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},500);
}
}
moveToStep(marker,route,0);
さらにスムーズな動きのために、すでに持っているものからポイントを補間することができます。
これがv3 APIで動作する私のソリューションです。これは、固定速度ではなく、計算されたルート期間に基づいてマーカーをアニメーション化します。速度の要素があるため、たとえば、実際よりも10倍速くルートを走行できます。
私はそれをできるだけ簡単にしようとしました。お気軽にご利用ください。
var autoDriveSteps = new Array();
var speedFactor = 10; // 10x faster animated drive
function setAnimatedRoute(Origin, destination, map) {
// init routing services
var directionsService = new google.maps.DirectionsService;
var directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
//calculate route
directionsService.route({
Origin: Origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
},
function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// display the route
directionsRenderer.setDirections(response);
// calculate positions for the animation steps
// the result is an array of LatLng, stored in autoDriveSteps
autoDriveSteps = new Array();
var remainingSeconds = 0;
var leg = response.routes[0].legs[0]; // supporting single route, single legs currently
leg.steps.forEach(function(step) {
var stepSeconds = step.duration.value;
var nextStopSeconds = speedFactor - remainingSeconds;
while (nextStopSeconds <= stepSeconds) {
var nextStopLatLng = getPointBetween(step.start_location, step.end_location, nextStopSeconds / stepSeconds);
autoDriveSteps.Push(nextStopLatLng);
nextStopSeconds += speedFactor;
}
remainingSeconds = stepSeconds + speedFactor - nextStopSeconds;
});
if (remainingSeconds > 0) {
autoDriveSteps.Push(leg.end_location);
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
// helper method to calculate a point between A and B at some ratio
function getPointBetween(a, b, ratio) {
return new google.maps.LatLng(a.lat() + (b.lat() - a.lat()) * ratio, a.lng() + (b.lng() - a.lng()) * ratio);
}
// start the route simulation
function startRouteAnimation(marker) {
var autoDriveTimer = setInterval(function () {
// stop the timer if the route is finished
if (autoDriveSteps.length === 0) {
clearInterval(autoDriveTimer);
} else {
// move marker to the next position (always the first in the array)
marker.setPosition(autoDriveSteps[0]);
// remove the processed position
autoDriveSteps.shift();
}
},
1000);
}
使用法：
setAnimatedRoute("source address or LatLng ...", "destination address or LatLng ...", map);
// start simulation on button click...
$("#simulateRouteButton").click(function() {
startRouteAnimation(agentMarker);
});
これがボタンであり、それらをクリックするとマーカーがソースルートから宛先ルートに移動するのに役立つことを願っています。 setRoutesメソッドは、マーカーのルートを設定するために使用されます。
function setRoutes(){
var directionsDisplay = new Array();
for (var i=0; i< startLoc.length; i++){
var rendererOptions = {
map: map,
suppressMarkers : true,
preserveViewport: true
}
directionsService = new google.maps.DirectionsService();
var travelMode = google.maps.DirectionsTravelMode.DRIVING;
var request = {
Origin: startLoc[i],
destination: endLoc[i],
travelMode: travelMode
};
directionsService.route(request,makeRouteCallback(i,directionsDisplay[i]));
}
設定後、ルートを作成してください。
function makeRouteCallback(routeNum,disp){
if (polyline[routeNum] && (polyline[routeNum].getMap() != null)) {
startAnimation(routeNum);
return;
}
return function(response, status){
if (status == google.maps.DirectionsStatus.OK){
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
startLocation[routeNum] = new Object();
endLocation[routeNum] = new Object();
polyline[routeNum] = new google.maps.Polyline({
path: [],
strokeColor: '#FFFF00',
strokeWeight: 3
});
poly2[routeNum] = new google.maps.Polyline({
path: [],
strokeColor: '#FFFF00',
strokeWeight: 3
});
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
disp = new google.maps.DirectionsRenderer(rendererOptions);
disp.setMap(map);
disp.setDirections(response);
//Markers
for (i=0;i<legs.length;i++) {
if (i == 0) {
startLocation[routeNum].latlng = legs[i].start_location;
startLocation[routeNum].address = legs[i].start_address;
// marker = google.maps.Marker({map:map,position: startLocation.latlng});
marker[routeNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
}
endLocation[routeNum].latlng = legs[i].end_location;
endLocation[routeNum].address = legs[i].end_address;
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
polyline[routeNum].getPath().Push(nextSegment[k]);
//bounds.extend(nextSegment[k]);
}
}
}
}
polyline[routeNum].setMap(map);
//map.fitBounds(bounds);
startAnimation(routeNum);
} // else alert("Directions request failed: "+status);
}
}
ついにスタートアニメーション機能を呼び出します
function startAnimation(index) {
if (timerHandle[index]) clearTimeout(timerHandle[index]);
eol[index]=polyline[index].Distance();
map.setCenter(polyline[index].getPath().getAt(0));
poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3});
timerHandle[index] = setTimeout("animate("+index+",50)",2000); // Allow time for the initial map display
}
GeekOnJavaブログで完全なコードを見つけ、そのコードをコピーして実行し、youtube。
自動的には移動しませんが、ファットフュージョンによる Google Drive の実験を確認してください。コードを確認すると役立つ場合があります。