Как установить положение (переместить) с несколькими маркерами на Google Maps - PullRequest
0 голосов
/ 08 ноября 2019

Я реализовал следующий код на одном маркере, и он отлично работает. Но у меня проблемы при использовании более одного маркера. Маркер не движется плавно. Кто-нибудь когда-либо сталкивался с подобным случаем?

Я использую ajax для получения последней версии API широты и долготы от третьих лиц.

Ниже приведен исходный код, который я настраиваю (для одного маркера), Я получил ссылку здесь:

<script type="text/javascript"> 
    var car_icon = 'car.gif';   
    var numDeltas = 100;
    var delay = 10; //milliseconds
    var iteration = 0;
    var position = [];
    var deltaLat,deltaLng, html_popup, map, date_popup, time_popup, bearing, posistion_description, registration;

    function get_first_coordinat(){
        $.ajax({
            url: "ajax.php?id=10",
            type: 'GET',
            dataType: 'JSON',
            cache: false,
            success: function(res) {
                if(res.status){
                    position[0] = parseFloat(res.latitude);
                    position[1] = parseFloat(res.longitude);
                    reload_api(res);
                } else {
                    console.log(res);
                }
            }
        });
    }

    //Load google map
    google.maps.event.addDomListener(window, 'load', get_first_coordinat);

    function initialize(res) { 
        var latlng = new google.maps.LatLng(position[0], position[1]);
        posistion_description = res.posistion_description;
        registration = res.registration;
        bearing = res.bearing;
        date_popup = (res.event_ts).substr(8, 2) + '/' + (res.event_ts).substr(5, 2) +'/'+(res.event_ts).substr(0, 4);
        time_popup = (res.event_ts).substr(11, 5);
        html_popup = '<table>'+
                        '<tr>'+
                            '<td><b>'+(registration)+'</b></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td><b>'+(posistion_description)+'</b></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td>'+
                                '<span class="status" style="background:'+(res.vehicle_status_color)+';">'+(res.vehicle_status).toUpperCase()+'</span>'+ '<b> '+time_popup+' - '+date_popup+'</b>'
                            '</td>'+
                        '</tr>'+                                
                        '<tr>'+
                            '<td>'+
                                '<b></b>'
                            '</td>'+
                        '</tr>'+
                    '</table>';
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);

        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: (res.registration),
            icon:car_icon,
        });

        var infowindow = new google.maps.InfoWindow({
            content:''
        });

        bindInfoWindow(marker, map, infowindow, html_popup);
    }

    // TRANSITION
    function transition(res){
        iteration = 0;
        deltaLat = (res.latitude - position[0])/numDeltas;
        deltaLng = (res.longitude - position[1])/numDeltas;

        // SET VARIABEL UNTUK POPUP
        posistion_description = res.posistion_description;
        bearing = parseInt(res.bearing);
        registration = res.registration;
        vehicle_status_color = res.vehicle_status_color;
        vehicle_status = res.vehicle_status;
        date_popup = (res.event_ts).substr(8, 2) + '/' + (res.event_ts).substr(5, 2) +'/'+(res.event_ts).substr(0, 4);
        time_popup = (res.event_ts).substr(11, 5);
        html_popup = '<table>'+
                        '<tr>'+
                            '<td><b>'+(registration)+'</b></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td><b>'+(posistion_description)+'</b></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td>'+
                                '<span class="status" style="background:'+(vehicle_status_color)+';">'+(vehicle_status).toUpperCase()+'</span>'+ '<b> '+time_popup+' - '+date_popup+'</b>'
                            '</td>'+
                        '</tr>'+                                
                        '<tr>'+
                            '<td>'+
                                '<b></b>'
                            '</td>'+
                        '</tr>'+
                    '</table>';

        moveMarker();
    }

    // MOVE MARKER
    function moveMarker(){          
        position[0] += deltaLat;
        position[1] += deltaLng;

        var latlng = new google.maps.LatLng(position[0], position[1]);

        marker.setTitle(registration+" - "+posistion_description);
        marker.setPosition(latlng);

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

    // POPUP WINDOW
    function bindInfoWindow(marker, map, infowindow, html_popup) { 
        google.maps.event.addListener(marker, "click", function () {
            infowindow.setContent(html_popup); 
            infowindow.open(map, marker);
        });

        google.maps.event.addListener(marker, 'mouseover', function() { 
            infowindow.setContent(html_popup); 
            infowindow.open(map, marker); 
        }); 

        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
        });
    } 

    // RELOAD API
    var no = 1;
    function reload_api(result){            
        if(no == 1){
            initialize(result);
        } else {
            $.ajax({
                url: "ajax.php?id=10",
                type: 'GET',
                dataType: 'JSON',
                cache: false,
                success: function(res) {
                    if(res.status){
                        transition(res);
                    } else {
                        console.log(res);
                    }
                }
            });
        }
        no++;

        // SET INTERVAL API
        setTimeout(reload_api, 5000);
    }

</script>  
...