Jquery 谷歌地图v3自动刷新标记只
我正在使用Google Maps V3显示一些PIN。我希望能够在不影响地图位置或缩放级别的情况下刷新标记。我希望每x秒更新一次标记 我该怎么做呢?我在jQuery/ajax方面没有那么多经验 下面是我的地图的一个工作示例Jquery 谷歌地图v3自动刷新标记只,jquery,html,ajax,Jquery,Html,Ajax,我正在使用Google Maps V3显示一些PIN。我希望能够在不影响地图位置或缩放级别的情况下刷新标记。我希望每x秒更新一次标记 我该怎么做呢?我在jQuery/ajax方面没有那么多经验 下面是我的地图的一个工作示例 var位置=[ [‘这里有一些随机信息’,-37.8139144.9634,1], [“这里有一些随机信息”,46.0553,14.5144,2], [‘这里有一些随机信息’,-33.7333151.0833,3], [这里有一些随机信息,27.9798,-81.731,4
var位置=[
[‘这里有一些随机信息’,-37.8139144.9634,1],
[“这里有一些随机信息”,46.0553,14.5144,2],
[‘这里有一些随机信息’,-33.7333151.0833,3],
[这里有一些随机信息,27.9798,-81.731,4],];
var map=new google.maps.map(document.getElementById('map_2385853'){
缩放:1,
最大缩放:8,
minZoom:1,
街景控制:错误,
中心:新google.maps.LatLng(40,0),
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow();
var标记,i;
对于(i=0;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,
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
/*
var testLocs = {
1: { info:'1. New Random info and new position', lat:-37, lng:124.9634 },//update info and position and
2: { lat:70, lng:14.5144 },//update position
3: { info:'3. New Random info' },//update info
4: { remove: true },//remove marker
5: { info:'55555. Added', lat:-37, lng:0 }//add new marker
};
setTimeout(function() {
setMarkers(testLocs);
}, ajaxObj.delay);
*/
// *******************
});
我不确定PHP是否能处理数字键。如果没有,请尝试字符串、
'1'
、'2'
等。为所有键提供字母前缀可能是最安全的,例如'loc1'
、'loc2'
等。无论您选择做什么,请确保javascriptlocs
对象中的键具有相同的类型和组成。您想刷新标记吗(删除它们,然后添加新的)或者只是更新他们的位置?据我所知,你所要做的就是用新数据覆盖locations数组来更改现有的位置你需要安排每个位置都有一个唯一的id,通过这个id可以寻址。id需要由服务器生成。如果你不能这样做,那么你就没有了o在每次迭代时替换所有位置(但不一定是所有相应的标记)。只要(a)您的1-4是ID,而不仅仅是索引,并且(b)服务器可以始终寻址每个位置(因此关联的标记)每次都通过相同的唯一id,那么你就有了进行选择性更新的基础,而不是完全替换。选择性更新需要更多的编程工作,因此如果位置数量较少,选择完全替换可能更现实。Daniel,是的,假设只有少数标记会被替换在每次迭代中都会受到影响,那么对于2000个标记,您肯定应该执行选择性更新。您所说的id生成很好。现有标记始终可以用相同的id重新寻址,新标记将收到一个新的以前未分配的id-完美。我现在没有时间帮助编写代码,但稍后会查看一天(几个小时后)。我想,如果我想更新特定的标记取决于json对象id,并保留其他标记的位置。不知何故,我从来没有让php部分工作。我看到php从服务器上拉出来,但它没有更新标记(只是删除所有标记)。我还将php输出作为test.json,再次,我看到它作为mime类型的json从Web服务器中提取,但在映射中没有发生任何事情。它不会在控制台中显示任何错误。
$(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
/*
var testLocs = {
1: { info:'1. New Random info and new position', lat:-37, lng:124.9634 },//update info and position and
2: { lat:70, lng:14.5144 },//update position
3: { info:'3. New Random info' },//update info
4: { remove: true },//remove marker
5: { info:'55555. Added', lat:-37, lng:0 }//add new marker
};
setTimeout(function() {
setMarkers(testLocs);
}, ajaxObj.delay);
*/
// *******************
});
<%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_encode($testLocs);
exit();
%>