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

【问题标题】：Show Moving Marker On updated Route (gmaps.js)在更新的路线上显示移动标记 (gmaps.js)
【发布时间】：2018-06-05 12:21:06
【问题描述】：

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 结果上显示动态移动标记，但地图会自动放大。我只想专注于终点并平滑移动标记而不刷新地图，并且还想按方向旋转汽车标记

【问题讨论】：

标签： jquery google-maps gmaps.js

【解决方案1】：

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

marker.setPosition Google API Reference

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

要改变图标方向，需要计算角度。 This SO answer 有它的实现（适用于 V2 和 V3）。

【讨论】：