Обновление маркера карты Google

Question

Я пытаюсь создать карту Google, которая обновляет маркер по мере обновления местоположения пользователя.Я сделал большую часть этого, но у меня есть одна маленькая проблема.Я хочу один маркер, который показывает начальную точку, с которой я работаю, но вторая точка должна продолжать двигаться, и она должна позволять отслеживать несколько пользователей одновременно.(отправка GPS-координат из приложения Android).Он установит начальный маркер, и когда его местоположение изменится, маркер переместится, чтобы отразить это.Мои проблемы возникают, когда я начинаю отслеживать второго пользователя.Маркер текущей позиции для первого пользователя становится начальной точкой для второго пользователя.Он «прыгает» с первого пути на другой (см. Рисунок).Я знаю, что это отчасти связано с объявлением переменной 'marker1' в верхней части, но я попробовал много вещей, но безуспешно.Мне нужно иметь возможность создавать столько пользователей, сколько нужно для n пользователей, поэтому я не могу объявить кучу переменных для каждой из них.

Вы можете видеть на картинке, что происходит.Это момент, когда новый пользователь запускает функцию отслеживания в приложении.Перед тем, как этот второй пользователь активирует функцию отслеживания, маркер для первого пользователя двигался правильно.

    function initialize() {
    var myLatlng = new google.maps.LatLng(39, -86);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }       
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var loc = {};
    var mark = {};
    var markers = {};
    var marker1;

    $(function () {
        $(document).ready(function(){
            setInterval(function(){
                $.ajax({                                      
                    url: 'api.php',                  //the script to call to get data          
                    //data: "",                       
                    dataType: 'json',                //data format      
                    success: function(data){          //on recieve of reply                          


                        var user_id = data[0];
                        var lati = data[1];              //get id
                        var longi = data[2];           //get name

                        var myLatlngt = new google.maps.LatLng(lati, longi);

                        if (typeof loc[user_id] === 'undefined') {
                            loc[user_id] = [];
                            }

                        //if (typeof markers[user_id] === 'undefined') {
                            //markers[user_id] = [];
                            //}

                        if (typeof mark[user_id] === 'undefined') {
                            mark[user_id] = myLatlngt;
                            }

                        loc[user_id].push(myLatlngt);
                        //markers[user_id].push(myLatlngt);

                        var x;
                        for (x in loc) {
                            var polyline = new google.maps.Polyline({
                                map: map,
                                path: loc[x],
                                strokeColor: "#FF0000",
                                strokeOpacity: 1.0,
                                strokeWeight: 2
                                });
                            polyline.setMap(map);

                            ///location variables
                            var start_loc = loc[user_id];
                            var start_marker = start_loc[0]; //start location of given user
                            var current_loc = start_loc[start_loc.length -1]; //last known location of given user

                            //set the start marker
                            var marker = new google.maps.Marker({
                                position: start_marker,
                                title: user_id
                            });
                            marker.setMap(map); 

                            //update the current location marker
                            if (marker1 != null) {
                                marker1.setPosition(current_loc);
                            }
                            else {
                                marker1 = new google.maps.Marker({
                                    position: current_loc,
                                    map: map
                                });

                            }                   
                        }
                            //console.log('location :::', x);
                            console.log('Marker: ', mark);
                    } 
                });
            }, 1000);
        });
    });
}

Answer 1

Учитывая то, что я действительно не знаю javascript, я могу быть совершенно не прав, но я предполагаю, что анонимная функция, отправленная в качестве аргумента setInterval, вызывается несколько раз (?).

Если это так, то я ожидаю, что маркер1 будет использоваться повторно, поскольку он объявлен вне функции, т. Е. Это тот же маркер1, который используется для каждого вызова функции в этой части кода

//update the current location marker
if (marker1 != null) {
    marker1.setPosition(current_loc);
}

Полагаю, вы могли бы использовать тот же метод для marker1, что и для loc, используя его как массив, индексированный по идентификатору пользователя. (возможно, было бы лучше назвать его currentLocationMarker)

Другим способом было бы иметь маркер1, существующий только внутри функции, но это может привести к тому, что все предыдущие маркеры текущего местоположения для пользователя будут видны. Не уверен насчет этого, я не получаю полного представления об этой системе, которую вы строите.

Answer 2

Не совсем понятно, в чем проблема, но вы пытались использовать .panTo()?Он плавно перемещается на новое место.Позвоните после вашего .setPosition().

if (marker1 != null) {
    marker1.setPosition(current_loc);
    map.panTo( current_loc );
}