谷歌地图-如何使用ajax/PHP将标记/位置更新到现有地图？

我有一个工作在我的网站上使用谷歌地图API v3谷歌地图。 地图在pageload上加载，并使用坐标数组中的多个标记/位置应用

现在，我要做的是通过ajax调用使用新的坐标数组动态更新标记/位置

以下是我的标记示例：

<div id="map-canvas"></div> 


<script type="text/javascript">  
var LocationData = <?php echo $coordsarray; ?>;


function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 10,
      draggable: true
    } );

    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }

    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);


//Ajax call
var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType : 'html',
            success: function (data) {
            var arr = data.split('|');
                    jQuery('#counterint').html(arr[0]);
                    jQuery('#extrainfoscounter').html(arr[1]);                           


            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);
</script>

var LocationData=；
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：10，
德拉格布尔：是的
} );
var bounds=new google.maps.LatLngBounds（）；
var infowindow=new google.maps.infowindow（）；
对于（LocationData中的var i）
{
var p=位置数据[i]；
var latlng=new google.maps.latlng（p[0]，p[1]）；
边界扩展（latlng）；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
标题：p[2]
});
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setContent（this.title）；
打开（地图，这个）；
});
}
映射边界（bounds）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
//Ajax调用
var间隔=5000；//1000=1秒，3000=3秒
函数doAjax（）{
jQuery.ajax({
键入：“POST”，
url:“/codes/LiveVisitsStats/postlivecounter.php”，
数据类型：“html”，
成功：功能（数据）{
var arr=data.split（“|”）；
jQuery（'#counterint'）.html（arr[0]）；
jQuery（'#extrainfosconter'）.html（arr[1]）；
},
完成：功能（数据）{
//安排下一个
setTimeout（doAjax，interval）；
}
});
}
setTimeout（doAjax，interval）；

因此，我现在需要做的是通过Ajax调用发送一个协调的数组，并在成功后使用新坐标更新现有的googlemap。 我曾试图找到这方面的文件，但没有成功。。

---

如果有人知道这样做的好方法，请帮助。

我最终选择了一种完全不同的方法。这是我使用的代码，它是有效的

<script type="text/javascript">     

    var locations = {}; //A repository for markers (and the data from which they were contructed).

    //initial dataset for markers
    var locs = {
        1: {
            info: '11111. Some random info here',
            lat: -37.8139,
            lng: 144.9634
        },
        2: {
            info: '22222. Some random info here',
            lat: 46.0553,
            lng: 14.5144
        },
        3: {
            info: '33333. Some random info here',
            lat: -33.7333,
            lng: 151.0833
        },
        4: {
            info: '44444. Some random info here',
            lat: 27.9798,
            lng: -81.731
        }
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 1,
        maxZoom: 8,
        minZoom: 1,
        streetViewControl: false,
        center: new google.maps.LatLng(30, 30),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();

    function setMarkers(locObj) {
        jQuery.each(locObj, function (key, loc) {
            if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
                //Marker has not yet been made (and there's enough data to create one).

                //Create marker
                loc.marker = new google.maps.Marker({
                    position: new google.maps.LatLng(loc.lat, loc.lng),
                    map: map
                });

                //Attach click listener to marker
                google.maps.event.addListener(loc.marker, 'click', (function (key) {
                    return function () {
                        infowindow.setContent(locations[key].info);
                        infowindow.open(map, locations[key].marker);
                    }
                })(key));

                //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
                locations[key] = loc;
            } else if (locations[key] && loc.remove) {
                //Remove marker from map
                if (locations[key].marker) {
                    locations[key].marker.setMap(null);
                }
                //Remove element from `locations`
                delete locations[key];
            } else if (locations[key]) {
                //Update the previous data object with the latest data.
                jQuery.extend(locations[key], loc);
                if (loc.lat !== undefined && loc.lng !== undefined) {
                    //Update marker position (maybe not necessary but doesn't hurt).
                    locations[key].marker.setPosition(
                    new google.maps.LatLng(loc.lat, loc.lng));
                }
                //locations[key].info looks after itself.
            }
        });
    }




    setMarkers(locs); //Create markers from the initial dataset served with the document.
    //ajaxObj.get(); //Start the get cycle.

    // *******************



//Ajax code
var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType : 'html',
            success: function (data) {
            var arr = data.split('|');
                    jQuery('#counterint').html(arr[0]);
                    jQuery('#extrainfoscounter').html(arr[1]);   
                    jQuery('#testdiv').html(arr[2]);         



//test: simulated ajax
var testLocs = {
        1: {
            info: '1. New Random info and new position',
            lat: -37,
            lng: 124.9634
        },
        2: {
            lat: 70,
            lng: 14.5144
        },
        3: {
            info: '3. New Random info'
        },
        4: {
            remove: true
        },
        5: {
            info: '55555. Added',
            lat: -37,
            lng: 0
        }
    };
setMarkers(testLocs);                   



            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);

</script>

变量位置={}//标记库（以及构建标记的数据）。
//标记的初始数据集
变量locs={
1: {
信息：“11111.这里有一些随机信息”，
纬度：-37.8139，
液化天然气：144.9634
},
2: {
信息：“22222.这里有一些随机信息”，
纬度：46.0553，
液化天然气：14.5144
},
3: {
信息：“33333.这里有一些随机信息”，
lat:-33.7333，
液化天然气：151.0833
},
4: {
信息：“44444.这里有一些随机信息”，
拉脱维亚：27.9798，
液化天然气：-81.731
}
};
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：1，
最大缩放：8，
minZoom:1，
街景控制：错误，
中心：新google.maps.LatLng（30,30），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
功能设置标记（locObj）{
jQuery.each（locObj，function）（key，loc）{
如果（！位置[键]&&loc.lat！==未定义&&loc.lng！==未定义）{
//标记尚未制作（并且有足够的数据创建一个）。
//创建标记
loc.marker=新的google.maps.marker({
位置：新google.maps.LatLng（loc.lat，loc.lng），
地图：地图
});
//将单击侦听器附加到标记
google.maps.event.addListener（loc.marker，'click'，（函数（键）{
返回函数（）{
infowindow.setContent（位置[key].info）；
信息窗口。打开（地图，位置[key]。标记）；
}
})（关键）；
//记住“位置”中的loc，以便显示其信息，并删除其标记。
位置[键]=loc；
}else if（位置[键]&位置移除）{
//从地图中删除标记
如果（位置[键].标记）{
位置[key].marker.setMap（null）；
}
//从“位置”中删除元素`
删除位置[键]；
}else if（位置[键]）{
//使用最新数据更新以前的数据对象。
jQuery.extend（位置[key]，loc）；
如果（loc.lat！==未定义和&loc.lng！==未定义）{
//更新标记位置（可能不需要，但不会造成伤害）。
位置[key].marker.setPosition(
新的google.maps.LatLng（loc.lat，loc.lng））；
}
//位置[key]。信息会自行处理。
}
});
}
设置标记（LOC）//从与文档一起提供的初始数据集创建标记。
//ajaxObj.get（）//开始获取周期。
// *******************
//Ajax代码
var间隔=5000；//1000=1秒，3000=3秒
函数doAjax（）{
jQuery.ajax({
键入：“POST”，
url:“/codes/LiveVisitsStats/postlivecounter.php”，
数据类型：“html”，
成功：功能（数据）{
var arr=data.split（“|”）；
jQuery（'#counterint'）.html（arr[0]）；
jQuery（'#extrainfosconter'）.html（arr[1]）；
jQuery（'#testdiv'）.html（arr[2]）；
//测试：模拟ajax
变量testLocs={
1: {
信息：“1.新随机信息和新位置”，
拉脱维亚：-37，
液化天然气：124.9634
},
2: {
拉脱维亚：70，
液化天然气：14.5144
},
3.