Перемещайте маркер Google Map динамически, используя JavaScript

Question

У меня есть div, где я показываю текущее местоположение пользователя.Что мне нужно, так это то, что когда пользователь перемещается, маркер должен перемещаться динамически, используя текущее местоположение пользователя, которое выбирается через ajax и из моей базы данных.Карта инициируется с помощью события onclick мыши, так как есть несколько пользователей.Весь мой блок кода выглядит следующим образом: Часть HTML:

<div id="map" class="mapBlock" style="width: 100%; height: 400px;"></div>
<button class="btn btn-info btn-sm mr-2 trackUser" data-toggle="modal" data-target="#trackUser"  data-did="<?php echo trim($user['did']);?>" onclick="getDid(this.getAttribute('data-did'));">Track User</button>

Часть Javascript:

    var position = [10.1563183,76.3882613];
    var did = 1;
    var cord = [10.1563183,76.3882613];

    function getDid(x){
        did = x;
        initialize();
        //Load google map
        google.maps.event.addDomListener(window, 'load', initialize);
    }

    function initialize() { 
        var latlng = new google.maps.LatLng(position[0], position[1]);
        var myOptions = {
            zoom: 18,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Latitude:"+position[0]+" | Longitude:"+position[1]
        });
        //auto refresh - update marker to current - position center
        var refreshId = setInterval("getLatLong(did)", 10000);
    }
    //get new lat/long
    function getLatLong(id) {
        var data = new FormData();
        data.append('did', id);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'users/get_user_location', true);
        xhr.onload = function () {
            if(xhr.status !== 200){
                return;
            }
            cord = this.responseText;
        };

        xhr.send(data);

        transition(cord);
    }

    var numDeltas = 100;
    var delay = 10; //milliseconds
    var i = 0;
    var deltaLat;
    var deltaLng;

    function transition(result){
        i = 0;
        deltaLat = (result[0] - position[0])/numDeltas;
        deltaLng = (result[1] - position[1])/numDeltas;
        moveMarker();
    }

    function moveMarker(){
        position[0] += deltaLat;
        position[1] += deltaLng;
        var latlng = new google.maps.LatLng(position[0], position[1]);
        marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
        marker.setPosition(latlng);

        if(i!=numDeltas){
            i++;
            setTimeout(moveMarker, delay);
        }
    }

Все работает нормально, но когда срабатывает функция setinterval, маркер исчезает.

Answer 1

Ваш метод moveMarker () работает нормально.Ваш маркер не исчезает.Он просто перемещается из вида.

Это можно исправить двумя способами:

1. Уменьшить уровень масштабирования.В настоящее время он установлен на 18. Вы можете установить его на 12 или что-то еще.

    var myOptions = {
        zoom: 12, //Decrease your Zoom Level.
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

        map.setCenter(latlng); //Here center the map.
        marker.setPosition(latlng);

Я не уверен, почему вы звоните moveMarker из moveMarker с помощью setTimeout.Это будет рекурсивно вызывать ваш метод, но это не будет иметь никакого значения для координат карты.Вы уже звоните getLatLong через каждые 10 секунд, и этого должно быть достаточно.