Показать движущийся маркер на карте
Я пытаюсь сделать движение маркера(не исчезают и появляются снова) на карте движения автомобиля на дороге.
У меня есть два значения latLng, и я хочу переместить маркер между ними, пока следующая точка не будет отправлена автомобилем. А затем повторите процесс еще раз.
что я пробовал:[это не очень эффективный способ, я знаю]
моей мыслью было реализовать вышеизложенное, используя технику в пунктах ниже:
1) Нарисуйте линию между ними.
2) получить latlng с каждой точки На 1/10-й доли полилинии.
3) отметить 10 точек на карте вместе с полилинией.
вот мой код:
var isOpen = false;
var deviceID;
var accountID;
var displayNameOfVehicle;
var maps = {};
var lt_markers = {};
var lt_polyLine = {};
function drawMap(jsonData, mapObj, device, deleteMarker) {
var oldposition = null;
var oldimage = null;
var arrayOflatLng = [];
var lat = jsonData[0].latitude;
var lng = jsonData[0].longitude;
//alert(jsonData[0].imagePath);
var myLatLng = new google.maps.LatLng(lat, lng);
if (deleteMarker == true) {
if (lt_markers["marker" + device] != null) {
oldimage = lt_markers["marker" + device].getIcon().url;
oldposition = lt_markers["marker" + device].getPosition();
lt_markers["marker" + device].setMap(null);
lt_markers["marker" + device] = null;
}
else {
console.log('marker is null');
oldimage = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
oldposition = myLatLng;
}
}
var image = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
lt_markers["marker" + device] = new google.maps.Marker({
position: myLatLng,
icon: image,
title: jsonData[0].address
});
if (oldposition == myLatLng) {
alert('it is same');
lt_markers["marker" + device].setMap(mapObj);
mapObj.panTo(myLatLng);
}
else {
alert('it is not same');
var markMarker = null;
var i = 10;
for (i = 10; i <= 100; i + 10) {
//-------
// setTimeout(function() {
if (markMarker != null) {
markMarker.setMap(null);
markMarker = null;
}
alert('inside the loop');
var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i / 100);
alert('Intermediate Latlng is :' + intermediatelatlng);
arrayOflatLng.push(intermediatelatlng);
var flightPath = new google.maps.Polyline({
path: arrayOflatLng,
strokeColor: "#FFFFFF",
strokeOpacity: 1.0,
strokeWeight: 1
});
flightPath.setMap(mapObj);
if (i != 100) {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: image,
title: jsonData[0].address,
map: mapObj
});
}
else {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: oldimage,
title: jsonData[0].address,
map: mapObj
});
}
mapObj.panTo(intermediatelatlng);
//--------
// }, 1000);
}
}
}
function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
// Get projected points
var projection = map.getProjection();
var pointFrom = projection.fromLatLngToPoint(latLngFrom);
var pointTo = projection.fromLatLngToPoint(latLngTo);
// Adjust for lines that cross the 180 meridian
if (Math.abs(pointTo.x - pointFrom.x) > 128) {
if (pointTo.x > pointFrom.x)
pointTo.x -= 256;
else
pointTo.x += 256;
}
// Calculate point between
var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
var pointBetween = new google.maps.Point(x, y);
// Project back to lat/lng
var latLngBetween = projection.fromPointToLatLng(pointBetween);
return latLngBetween;
}
Проблемы:
1) маркер не отображается на карте, потому что процесс построения и удаления маркера происходит так быстро, что маркер не виден на экране. Я пробовал setTimeOut, и это совсем не помогает.
2) Если я alow браузер для запуска этого кода в течение более 5 минут, браузер аварийно завершает работу.
Примечание: вышеуказанная функция вызывается каждые 10 секунд с помощью setInterval.
что может быть лучшим решением? пожалуйста помочь..
5 ответов
чтобы маркер двигался относительно плавно, вам нужно
- обновить более чем каждую 1/10 часть полилинии (по крайней мере, каждые несколько пикселей)
- вызовите метод обновления чаще
- не удалять и повторно добавлять маркер
например, что-то вроде:
var counter = 0;
interval = window.setInterval(function() {
counter++;
// just pretend you were doing a real calculation of
// new position along the complex path
var pos = new google.maps.LatLng(35, -110 + counter / 100);
marker.setPosition(pos);
if (counter >= 1000) {
window.clearInterval(interval);
}
}, 10);
Я сделал простой пример в http://jsfiddle.net/bmSbU/2/ который показывает маркер, движущийся по прямому пути. Если это что вы хотите, большая часть вашего кода выше относительно того, где вдоль линии вы можете быть повторно использованы (или проверитьhttp://broady.github.io/maps-examples/points-along-line/along-directions.html)
можно использовать маркер-анимация-ненавязчивая библиотека для создания маркеров плавный переход из одного места в другое (вместо повторного появления).
вы можете инициализировать свой маркер следующим образом:
var marker = new SlidingMarker({
//your original marker options
});
просто позвоните маркер.setPosition () каждый раз, когда прибывает координата нового транспортного средства.
Почему бы не сохранить существующий маркер / MarkerImage и вызвать setPosition (), чтобы переместить его, либо по таймеру, либо по мере изменения позиции?
удаление и воссоздание-это то, что заставляет его мигать/ мерцать и в конечном итоге сбой. Если вы сохраняете тот же экземпляр, но просто перемещаете его, вы должны сделать намного лучше.
Посмотреть: Маркер.setposition для()
https://developers.google.com/maps/documentation/javascript/reference#Marker
сделать анимированный движущийся маркер на карте Google с помощью javascript и можно увидеть их на Youtube.com
попробуйте по этой ссылке.. Сначала добавьте два маркера в 2 места, которые у вас есть. Тогда вы можете создать анимацию между 2 точками с кодом ссылке