我正在使用Google Maps V3来显示一些引脚.我希望能够刷新标记而不影响您在地图上的位置或缩放级别.我希望标记每x秒更新一次.
我该怎么做呢？我对jQuery / ajax没有那么多经验.
我的地图的一个工作示例如下.
var locations = [
['some random info here',-37.8139,144.9634,1],['some random info here',46.0553,14.5144,2],-33.7333,151.0833,3],27.9798,-81.731,4],];
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 marker,i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map
});
google.maps.event.addListener(marker,'click',(function(marker,i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,marker);
}
})(marker,i));
}
谢谢
解决方法
好的,我有一些工作 – 很大程度上是对原始代码的重构 – 你会认识到各种各样的块.
$(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,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,(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
/*
var testLocs = {
1: { info:'1. New Random info and new position',lat:-37,lng:124.9634 },//update info and position and
2: { lat:70,//update position
3: { info:'3. New Random info' },//update info
4: { remove: true },//remove marker
5: { info:'55555. Added',lng:0 }//add new marker
};
setTimeout(function() {
setMarkers(testLocs);
},ajaxObj.delay);
*/
// *******************
});
在代码的底部,您将找到testLocs数据集,演示在应用初始数据集后添加/删除/更新标记的可能性范围.
我没有完全测试ajax,但是用testLocs数据集模拟了它.
见DEMO
10秒后,将应用testLocs,您将看到标记的各种更改(以及infowindow中显示的信息).请特别注意,更新数据不需要完整 – 只需指定更改即可.
您需要安排您的服务器：
>按照我的locs示例构建初始数据集.
>按照testLocs示例的一般格式返回JSON编码的数据集.
编辑1
我已经包含了获取新数据集所需的所有客户端代码.您需要做的就是：
>创建一个服务器端脚本(例如“get_markers.PHP”),它返回正确格式的json编码数据集(已经是exaplined).
>编辑行url：“……..”,指向服务器端脚本,例如url：“get_markers.PHP”.
>通过取消注释行ajaxObj.get();来激活循环ajax进程.
>确保注释掉或删除“模拟ajax”代码块.
编辑2
我添加了一个名为auto_remove的布尔“行为开关”.设置为true时,将运行一小段附加代码块,从而导致删除未报告的loc的所有标记.
这将允许您在每次迭代时报告所有活动标记.删除将自动进行,无需主动命令.
响应{remove：true}的代码仍然存在,因此(如果auto_remove设置为false)删除可以明确命令,如果您需要这样做.
更新DEMO
编辑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','lng' => 60 ) ); echo json_encode($testLocs); exit(); %>
我不确定PHP是否会处理数字键.如果没有,那么尝试字符串,’1′,’2’等.给所有键一个字母前缀可能是最安全的,例如. ‘loc1’,’loc2’等.无论您选择做什么,请确保javascript locs对象中的键具有相同的类型和组成.
