Как обновить карты с помощью запроса AJAX?

Question

Я хочу перезагрузить карту в вызове ajax. Этот код перезагружает всю страницу, когда я меняю статус, он перезагружает всю страницу. Я хочу, чтобы через 10 секунд только карта перезагружала не всю страницу.если я выбираю изменение доступно, то карта перезагружается через каждые 10 секунд в доступной опции.

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

Я обновляю содержимое в некотором div страницы с помощью функции load () jQuery, но она не работает.

Html:

                <div class="row">
                    <div class="col-md-12">
                        <div id="map" style="height: 550px;">
                            <div id="time">
                                <?php echo date('H:i:s');?>
                            </div>
                        </div>
                    </div>
                </div>

Сценарий:

     $('#status').change(function () {
                var job_status = $(this).val();
                $.ajax({
                    url: '{{ URL::to('/get_drivers/')}}' + '/' + $(this).val(),
                    type: 'get',
                    datatype: 'json',
                    success: function (response) {
                        setInterval("my_function();", 10000);

                        function my_function() {
                            $('#map').load(location.href + ' #time');
                        }


                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 10,
                            center: {lat: 31.5204, lng: 74.3587},
                            mapTypeId: 'roadmap'
                        });

                        var infowindow = new google.maps.InfoWindow({});
                        var marker, i;
                        {{--var carIcon = '{{asset('images/red-car.png')}}';--}}


                        if (gmarkers.length > 0) {
                            for (i = 0; i < gmarkers.length; i++) {
                                if (gmarkers[i].getMap() != null) {
                                    gmarkers[i].setMap(null);
                                } else {
                                    gmarkers[i].getMap();
                                    gmarkers[i].setMap(map);
                                }
                            }
                            gmarkers = [];
                        }


                        for (i = 0; i < locationData.length; i++) {

                            if (job_status == 8) {

                                if (job_status === '') {
                                    gmarkers = [];
                                }
                                else {
                                    for (i = 0; i < locationData2.length; i++) {

                                        marker = new google.maps.Marker({
                                            position: new google.maps.LatLng(locationData2[i]['driver_lat'], locationData2[i]['driver_long']),
                                            map: map,
                                            optimized: false,
                                            icon: '{{asset('images/grey-car.png')}}'

                                        });

                                        google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {

                                            return function () {
                                                infowindow.setContent('<h6><b>' + locationData2[i]['first_name'] + '</h6>');
                                                infowindow.open(map, marker);
                                            }
                                        })(marker, i));


                                        google.maps.event.addListener(map, 'click', (function (marker, i) {

                                            return function () {
                                                infowindow.setContent();
                                                infowindow.close(marker);

                                            }
                                        })(marker, i));

                                        // Push your newly created marker into the array:
                                        gmarkers.push(marker);

                                        var myoverlay = new google.maps.OverlayView();
                                        myoverlay.draw = function () {
                                            // add an id to the layer that includes all the markers so you can use it in CSS
                                            this.getPanes().markerLayer.id = 'markerLayer';
                                        };
                                        myoverlay.setMap(map);


                                    }
                                }
                            }
                       });

Answer 1

Вам не нужно обновлять всю карту, но только маркеры водителей (или, если быть более точным, не целые маркеры, а только их позиции)

Я использую собственный Google пример и помещаю туда пару маркеров, позиции которых обновляются в случайном месте каждую секунду.

//random locations
var latArr = [-20.363882, -21.363882, -22.363882, -23.363882, -24.363882, -25.363882, -26.363882, -27.363882, -28.363882, -29.363882];
var lngArr = [125.044922, 126.044922, 127.044922, 128.044922, 129.044922, 130.044922, 131.044922, 132.044922, 133.044922, 134.044922];
//global array to hold all markers
var markersArr = [];
//map init from google example
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });
  //create markers
  var marker1 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });
   var marker2 = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
      scale: 5
    },
    draggable: true,
    map: map
  });
  markersArr.push(marker1);
  markersArr.push(marker2);
}
//function to change markers locations
function renewMarkers(){
	for(i=0; i<markersArr.length; i++){
		var lt = Math.floor(Math.random()*10);
		var ln = Math.floor(Math.random()*10);
		markersArr[i].setPosition({lat: latArr[lt], lng: lngArr[ln]})
	}
}

setInterval(renewMarkers, 1000);

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<div id="map"></div>