如何通过ajax更新地图数据

时间:2017-03-24 06:13:04

标签: javascript google-maps google-maps-api-3

我正在尝试通过ajax更新地图数据但是我的代码不能用于此代码:

$(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));
});

以上代码每10秒钟更新一次地图图标和日期,但它不起作用。我在哪里做错了?

这是我的数据:

[
    ["30.740395","76.7804482","Dbd Dbdhdh","1",4],
    ["30.740395","76.7804482","Sam Sam","1",4],
    ["30.7404344","76.7804032","Sumit Kumar","1",4],
    ["30.74041018","76.78060575","Chetan Nagrath","3",4],
    ["30.7403555","76.7804933","Sahil Kapoor","2",4],
    ["30.7403648","76.7805835","paras kumar",1,3]
]

1 个答案:

答案 0 :(得分:0)

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

每次从服务器获取数据时都无需初始化。只需初始化一次,并为其他作品使用相同的地图对象。

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

尝试以下方式。

concat(…)

这里您将在10秒后获得数据。如果你想在第一时间本身意味着在初始化地图一次后调用 makeRequest