好的，我有一些工作-很大程度上是对原始代码的大量重构-您会认识到各种不同的块。
$(function() { var locations = {};//A repository for markers (and the data from which they were constructed). //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_2385853'), { zoom: 1, maxZoom: 8, minZoom: 1, streetViewControl: false, center: new google.maps.LatLng(40, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow();var auto_remove = true;//When true, markers for all unreported locs will be removed.function setMarkers(locObj) { if(auto_remove) { //Remove markers for all unreported locs, and the corrsponding locations entry. $.each(locations, function(key) { if(!locObj[key]) { if(locations[key].marker) { locations[key].marker.setMap(null); } delete locations[key]; } }); } $.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. $.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. } }); } var ajaxObj = {//Object to save cluttering the namespace. options: { url: "........",//The resource that delivers loc data. dataType: "json"//The type of data tp be returned by the server. }, delay: 10000,//(milliseconds) the interval between successive gets. errorCount: 0,//running total of ajax errors. errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease. ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker); get: function() { //a function which initiates if(ajaxObj.errorCount < ajaxObj.errorThreshold) { ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay); } }, fail: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); ajaxObj.errorCount++; } }; //Ajax master routine function getMarkerData() { $.ajax(ajaxObj.options) .done(setMarkers) //fires when ajax returns successfully .fail(ajaxObj.fail) //fires when an ajax error occurs .always(ajaxObj.get); //fires after ajax success or ajax error } setMarkers(locs);//Create markers from the initial dataset served with the document. //ajaxObj.get();//Start the get cycle. // ******************* //test: simulated ajax // *******************});在代码的底部，您将找到一个
testLocs数据集，展示了在应用初始数据集后添加/删除/更新标记的可能性范围。
我还没有完全测试过ajax，但是已经使用
testLocs数据集对其进行了模拟。
见 演示
10秒钟后，
testLocs将被应用，您将看到标记的各种变化（以及信息窗口中显示的信息）。请特别注意，更新数据不需要完整-只需指定更改即可。
您需要安排服务器：
- 按照我的
locs
示例构建初始数据集。 - 按照我的
testLocs
示例的一般格式返回JSON编码的数据集。
编辑1
我已经包含了获取新数据集所需的所有客户端代码。您需要做的只是：
- 创建一个服务器端脚本（例如“ get_markers.php”），该脚本返回正确格式（已被夸大）的json编码数据集。
- 编辑该行
url: "........",
以指向服务器端脚本，例如url: "get_markers.php"
。 - 通过取消注释行来激活循环ajax进程
ajaxObj.get();
。 - 确保已注释掉或删除了“模拟的ajax”代码块。
编辑2
我添加了一个名为的布尔“行为开关”
auto_remove。设置为true时，将运行一小段额外的代码块，从而删除所有未报告位置的标记。
这将允许您在每次迭代中报告所有 活动 标记。删除将自动进行，而无需主动命令它们。
响应的代码
{ remove: true }仍然存在，因此，如果需要，可以明确命令（将auto_remove设置为
false）删除。
更新了 演示
编辑3
PHP脚本应构建以下形式的数组：
<%php$testLocs = array( 'loc1' => array( 'info' => '1. New Random info and new position', 'lat' => 0, 'lng' => 144.9634 ), 'loc2' => array( 'lat' => 0, 'lng' => 14.5144 ), 'loc3' => array( 'info' => '3. New Random info' ), 'loc5' => array( 'info' => '55555. Added', 'lat' => 0, 'lng' => 60 ));echo json_enpre($testLocs);exit();%>
我不确定PHP是否会处理数字键。如果没有，那么试试字符串
'1'，
'2'等等。这也可能是最安全的给所有按键字母前缀，例如。
'loc1'，
'loc2'等等。无论你选择做什么，请务必在Javascript的按键
locs对象是同一类型和组成。
