在更新的路线上显示移动标记 (gmaps.js)

Question

var map;
var counter = 1;
$(document).ready(function(){      
updateMap();
interval = setInterval(updateMap,10000);
function updateMap() {
$.ajax({
url: "gettriproute?trip_id="+{{ $id }}, 
success: function(result){ 
if (result.latlong == 'false') {
//alert('route not found');
$('#map').empty();
$('#map').append('<h1 style="text-align: center;">Route not found</h1>');
return false;
}
if (result.status[0] != 'ongoing') {
$('#map').empty();
$('#map').append('<h1 style="text-align: center; opacity: 0.5;">Trip Completed</h1>');
return false;   
}
var len = (result.latlong.length) -1;                    
var center = Math.round(len/2);
path = result.latlong;

$($(result.latlong).get().reverse()).each(function(index, element) {                    
});
//if (counter == 1) {                    
map = new GMaps({
el: '#map',
//zoom:18,
lat: result.latlong[len][0],
lng: result.latlong[len][1],
});
//   counter = counter + 1;  
// }
map.removeMarkers();
map.removePolylines();
map.drawPolyline({
path: path,
strokeColor: '#00B9FF',
strokeOpacity: 0.6,
strokeWeight: 6
});
map.addMarker({
lat: result.latlong[0][0],
lng: result.latlong[0][1],
title: 'Start Point',
});
map.addMarker({
lat: result.latlong[len][0],
lng: result.latlong[len][1],
rotation: 90,
icon:'{{ asset('public/img/marker.png') }}',

});
// map.fitZoom({                          
//     latLngs: result.latlong[len]
// });
//ajax request end braces
},
error: function(e) {
console.log(e);
}
});
}
});

这是我的代码，它使用ajax结果问题更新地图，下面描述了任何帮助，提前感谢

我想在 AJAX 结果上显示动态移动标记，但地图会自动放大。 我只想专注于终点并平稳移动标记而不刷新地图，还想按方向旋转汽车标记

Answer 1

1. 为了平滑地显示标记移动并停止重新初始化映射，只需第一次在 ajax 请求之外初始化它并使用marker.setPosition(new google.maps.LatLng({lat:"",lng:""}))更新标记位置，而不是删除并使用新坐标重新添加它。

marker.setPosition Google API 参考

平滑度可以通过频繁或WebSocketssetInterval(如您已经实现的那样(对请求进行长轮询来实现。长轮询请求可能无法按给定顺序解析，因为它是异步进行的。因此，实现套接字连接并将坐标写入服务器json对象，并使用WebSocket.onMessage事件处理程序更新映射。

2. 要更改图标方向，需要计算角度。这个 SO 答案有它的实现(对于 V2 和 V3(。