Javascript 如何通过ajax更新地图数据

我试图通过ajax更新地图数据，但ist不起作用。下面是我的代码：

$(document).ready(function() {
    function makeRequest(){
        $.ajax({
            url:"<?php echo Url::base(true).'/users/online-peoples'; ?>",
            type:"POST",                
        })
        .done(function(result){             
            var icon1 = 'https://mt.googleapis.com/vt/icon/name=icons/onion/27-cabs.png&scale=1.0';
            if(result){                             
                var map;
                function initMap() {
                    var infowindow = new google.maps.InfoWindow();
                    var mapOptions = {
                        zoom: 12,
                        center: new google.maps.LatLng('30.7333','76.7794'), 
                        mapTypeControlOptions: {
                            mapTypeIds: ['roadmap']
                        }
                    };
                    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

                    var online =result; 
                    var mapIcons = ['https://mt.googleapis.com/vt/icon/name=icons/onion/27-cabs.png&scale=1.0'];
                    var person = {3:"Customer1 : ", 4:"Driver1 : "};
                    var arr = [];
                    var marker, i;
                    for (i = 0; i < online.length; i++) 
                    { 
                        console.log(online[i]);
                        arr.push(new google.maps.LatLng(online[i][0], online[i][0]));
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(online[i][0], online[i][1]),
                        icon:mapIcons[0],
                        suppressMarkers: true,
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(person[online[i][4]]+online[i][2]+', Phone : '+online[i][5]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i)); 
                }        
            }
        }               
    });
} 
setInterval(makeRequest, (10 * 1000));
});

---

您没有初始化地图。由于它的内部initMapmap函数没有人调用它

而且不需要每次从服务器获取数据时都进行初始化。只需初始化一次，并在其他作品中使用相同的贴图对象

在获取数据时要小心，您正在尝试获取索引5中的数据。但是数组只有0到4

试试下面的方式

$(document).ready(function() {   
    function makeRequest() {
        $.ajax({
            url : "url",
            type : "POST",
        }).done(function(result) {
            if (result) {
                console.log("You Got your data", result);
            }
        });
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom : 12,
        center : new google.maps.LatLng('30.7333', '76.7794'),
        mapTypeControlOptions : {
            mapTypeIds : [ 'roadmap' ]
        }
    });
    setInterval(makeRequest, (10 * 1000));
});

---

在这里，您将在10秒后获得数据。如果您想在第一次调用它本身，则意味着在初始化map一次之后调用makeRequest。

是否可以为任何测试数据提供url？

$(document).ready(function() {   
    function makeRequest() {
        $.ajax({
            url : "url",
            type : "POST",
        }).done(function(result) {
            if (result) {
                console.log("You Got your data", result);
            }
        });
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom : 12,
        center : new google.maps.LatLng('30.7333', '76.7794'),
        mapTypeControlOptions : {
            mapTypeIds : [ 'roadmap' ]
        }
    });
    setInterval(makeRequest, (10 * 1000));
});