Jquery 在更新的路线上显示移动标记（gmaps.js） var映射； var计数器=1； $（文档）.ready（函数（）{ updateMap（）； 间隔=设置间隔（更新映射，10000）； 函数updateMap（）{ $.ajax({ url:“gettriproute？trip_id=“+{{$id}，”， 成功：函数（结果）{ 如果（result.latlong==“false”）{ //警报（“未找到路线”）； $（'#map'）.empty（）； $（'#map'）。追加（'Route not found'）； 返回false； } 如果（结果状态[0]！=“正在进行中”）{ $（'#map'）.empty（）； $（“#映射”）.append（'Trip Completed'）； 返回false； } var len=（result.latlong.length）-1； 变量中心=数学圆（len/2）； path=result.latlong； $（$（result.latlong.get（）.reverse（））.each（函数（索引，元素）{ }); //如果（计数器==1）{ map=新的gmap({ el:'地图'， //缩放：18， lat:result.latlong[len][0]， 液化天然气：结果。拉特朗[len][1]， }); //计数器=计数器+1； // } map.removeMarkes（）； removePolylines（）； 映射多段线({ 路径：路径， strokeColor:“#00B9FF”， 笔划不透明度：0.6， 冲程重量：6 }); map.addMarker({ lat:result.latlong[0][0]， lng:result.latlong[0][1]， 标题：“起点”， }); map.addMarker({ lat:result.latlong[len][0]， 液化天然气：结果。拉特朗[len][1]， 轮换：90， 图标：“{asset（'public/img/marker.png'）}}”， }); //map.fitZoom（{ //latLngs:result.latlong[len] // }); //ajax请求结束括号 }, 错误：函数（e）{ 控制台日志（e）； } }); } });

这是我用ajax更新地图的代码，结果问题如下所述。任何帮助，请提前感谢

我想在ajax结果上显示动态移动标记，但地图会自动放大。我只想专注于终点，在不刷新地图的情况下平滑移动标记，还想按照方向旋转汽车标记

要平稳显示标记移动并停止重新初始化地图，只需在ajax请求之外首次初始化它，并使用

marker.setPosition（new google.maps.LatLng（{lat:，lng:}））

更新标记位置，而不是删除并使用新坐标重新添加它

平滑度可以通过频繁使用

setInterval

（如您所实现）或

WebSockets

长时间轮询请求来实现。长轮询请求可能不会按给定顺序解析，因为它是异步进行的。因此，实现一个套接字连接，将坐标作为服务器中的

json

对象写入，并使用

WebSocket.onMessage

事件处理程序更新映射

要更改图标方向，需要计算角度。有它的实现（对于V2和V3）

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);
            }
        });
    }

});