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

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

marker.setPosition Google API Reference

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

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

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

1 个答案: