如何动态地将数据添加到谷歌地图API？ [英] How to dynamically add data to google maps API?

问题描述

我有一张地图，我希望有一个lat / long数据源被推送到地图数据数组。我有获取数据的功能，但无法在地图数据数组中使用。

I have got a map that I want to have a feed of lat/long data getting pushed to the map data array. I have the function to get the data, but am having trouble getting that to be usable in the map data array.

这个想法是在一个新的坐标被添加到数组中。有任何想法吗？提前致谢！

The idea is to have a new marker drop in when a new coordinate is added to the array. Any ideas? Thanks in advance!

   var ID='0';
        var DATA=[];
        function getData(){
            var url = 'http://us7.fieldagent.net/api/newResponses/';
            //url = 'http://us7.fieldagent.net/api/newResponses/;
            $.post(url,{'id':ID},function(data){
                if(data.status_id == 0){
                    ID = data.id;
                    console.log('Last Id: '+data.id);
                    var new_data = data.responses;

                    var count = 0
                    $.each(new_data,function(i,v){
                        count += 1;
                        var coord = 'new google.maps.LatLng('+v.lat+','+v.lon+'),';
                        DATA.push(coord);
                    })
                    console.log('Added '+count+' responses..')
                }
            });
        }
    $(document).ready(function(){
                getData();
                setInterval(getData,20*1000);
            });

        function drop() {
                for (var i = 0; i < DATA.length; i++) { 
                        setTimeout(function() {
                            addMarker();
                        }, i * 500);
                    }
                } 

        function addMarker(){
            markers.push(new google.maps.Marker({
                position: DATA[iterator],
                map: map,
                draggable: false,
                icon: 'fatie.svg',
                animation: google.maps.Animation.DROP
            }));
            iterator++;
        }

推荐答案

您需要实际添加项目到地图。现在，您只需将一个项目添加到 DATA 数组中。您需要在新数据中调用 addMarker 。

You need to actually add the item to the map. Right now, you're only adding an item to your DATA array. You need to call addMarker with the new data as well.

您似乎想要将这些标记添加到以一定的时间间隔映射，以便随时间推移到地图上，同时还可以从服务器查询新标记。

You seem to want to add these markers to the map at an interval so they drop onto the map over time, while also being able to query for new markers from your server.

尝试如下代码：

var ID='0';
var DATA=[];
function getData(){
    var url = 'http://us7.fieldagent.net/api/newResponses/';
    $.post(url,{'id':ID},function(data){
        if(data.status_id == 0){
            ID = data.id;
            console.log('Last Id: '+data.id);
            var new_data = data.responses;

            var count = 0
            $.each(new_data,function(i,v){
                count += 1;
                var coord = 'new google.maps.LatLng('+v.lat+','+v.lon+'),';
                DATA.push(coord);
            });
            console.log('Added '+count+' responses..');
            if (count > 0) addMarker(); //call addMarker if there are new markers
        }
    });
}
$(document).ready(function(){
    getData();
    setInterval(getData,20*1000);
});

function addMarker(){
    if (DATA.length == 0) return; //exit if DATA is empty
    markers.push(new google.maps.Marker({
        position: DATA.shift(), //take the first item in DATA
        map: map,
        draggable: false,
        icon: 'fatie.svg',
        animation: google.maps.Animation.DROP
    }));
    if (DATA.length > 0) setTimeout(addMarker, 500); //call again if needed
}

这篇关于如何动态地将数据添加到谷歌地图API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！