javascript - 如何使用ajax请求刷新 map ？

Question

我想在 ajax 调用中重新加载 map 。这段代码正在重新加载整个页面，当我更改状态时它会重新加载整个页面。我想在 10 秒后只重新加载 map 而不是整个页面。如果我选择可用更改，则在可用选项中每 10 秒重新加载一次 map 。

如果我选择可用的驱动程序状态，则我有驱动程序，然后 map 会显示可用的驱动程序。我想在 10 秒后刷新 map ，以便我可以查看是否有其他可用的驱动程序。如果可用，它将显示在 map 上而无需重新加载整个页面。这就是我想要的。

我正在使用 jQuery load() 函数刷新页面某些 div 中的内容，但它不起作用。

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

您不需要更新整个 map ，只需更新司机标记(或者更准确地说 - 不是整个标记，而只需更新它们的位置)

我使用谷歌自己的 example并在那里放置几个标记，这些标记的位置每秒更新到随机位置。

//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>