Показать маркер перемещения на обновленном маршруте (gmaps.js) - PullRequest
Новая
       22

Показать маркер перемещения на обновленном маршруте (gmaps.js)

0 голосов
/ 05 июня 2018 
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, но карта увеличится автоматически.я просто хочу сфокусироваться на конечной точке и плавно перемещать маркер, не обновляя карту, а также хочу поворачивать маркер автомобиля в соответствии с направлением

1 Ответ

0 голосов
/ 05 июня 2018
  1. Чтобы плавно показать движение маркера и прекратить повторную инициализацию карты, просто инициализируйте его вне запроса ajax в первый раз и обновите позицию маркера, используя marker.setPosition(new google.maps.LatLng({lat:"",lng:""})) вместо удаления и повторного добавления его с новымкоординаты.

marker.setPosition Справочник по API Google

Сглаживание может быть достигнуто путем длинного опроса запроса с использованием setInterval (как у вас естьчасто) или WebSockets.Длинные запросы могут не обрабатываться в заданном порядке, так как это делается асинхронно.Поэтому реализуйте соединение через сокет и запишите координаты как json объекты с сервера и обновите карту, используя обработчик событий WebSocket.onMessage.

Чтобы изменить направление значка, необходимо рассчитать угол. Этот ответ SO имеет реализацию для него (как для V2, так и для V3).
...