自动刷新Google地图标记。 [英] Auto Refresh of Google Map markers.
问题描述
嘿那里,我正在学习本教程:
https://developers.google.com/kml/articles/phpmysqlkml [ ^ ]
它的工作原理是美化的。我从数据库中读取数据并生成XML文件并将其覆盖在谷歌地图上。
代码与教程完全相同。现在的问题是我自动刷新调用php页面的html页面。 php脚本生成XML文件。我正在使用Meta标头自动刷新html页面。看到整个页面每5秒重新加载一次非常烦人。我需要刷新,因为我正在构建具有动态功能的远程记录器。
我想刷新标记。而不是页面。 html文件代码如下。请紧急帮忙。谢谢
< !DOCTYPE html >
< head >
< meta name = viewport content = initial-scale = 1.0,user-scalable = no / >
< meta http-equiv = content-type content = text / html; charset = UTF-8 / >
< title > Drifter < / title >
< span class =code-keyword>< script type = text / javascript src = http: //maps.googleapis.com/maps/api/js?sensor=false\"> < / script & gt;
< script type = text / javascript >
// <![CDATA [
setTimeout( function (){
window 。 location .reload();
}, 5000 );
var customIcons = {
blue:{
icon:' http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow:' http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
红色:{
图标:' http://labs.google.com/ridefinder/ images / mm_20_red.png',
shadow:' http://labs.google。 com / ridefinder / images / mm_20_shadow.png'
}
};
function load(){
var map = new google.maps。地图( document .getElementById( map),{
center: new google.maps.LatLng(-29。 86519774 , 30 。 98538962 ),
zoom: 18 ,
mapTypeId:' terrain'
});
var infoWindow = new google.maps.InfoWindow;
// 根据PHP文件的名称进行更改
downloadUrl( genxml.php, function (数据){
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName( marker);
for ( var i = 0 ; i < markers.length; i ++){
var point = new google .maps.LatLng(
parseFloat (markers [i] .getAttribute( LA t)),
parseFloat (markers [i] .getAttribute( lon)));
var icon = customIcons [ blue] || {};
var marker = new google.maps.Marker({
map:map ,
position:point,
icon:icon.icon,
shadow:icon.shadow
});
bindInfoWindow(marker,map,infoWindow);
}
});
}
function bindInfoWindow(marker,map,infoWindow){
google .maps.event.addListener(marker,' 点击', function (){
infoWindow.open(map,marker);
});
}
function downloadUrl(url,callback){
var request = window .ActiveXObject?
new ActiveXObject(' Microsoft.XMLHTTP' ):
new XMLHttpRequest;
request.onreadystatechange = function (){
if ( request.readyState == 4 ){
请求。 önreadystatechange= doNothing;
回调(request,request.status);
}
};
request.open(' GET',url,真跨度>);
request.send( null );
}
function doNothing(){}
//
< / script >
< span class =code-keyword>< / head >
< body onload = load() < span class =code-keyword>>
< div id = 地图 style = width:1000px;高度:600px > < / div >
< / body >
< / html >
谢谢
试试我正在使用setInterval
<!DOCTYPE html>
< head>
< meta name =viewportcontent =initial-scale = 1.0,user- scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Drifter< / title>
< script type =text / javascriptsrc =http://maps.googleapis .com / maps / api / js?sensor = false>< / script>
< script type =text / javascript>
//<![CDATA [
var markers = [];
setInterval(function(){
DeleteMarkers();
BindMarker();
},5000);
函数DeleteMarkers(){
//遍历所有标记并删除
for(var i = 0; i< markers.length; i ++){
markers [i] .setMap (null);
}
markers = [];
};
var customIcons = {
blue: {
icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow:'http://labs.google.com/ridefinder/images/mm_20_shadow。 png'
},
红色:{
图标:'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow:'http://labs.google.com/ridefinder/images/ mm_20_shadow.png'
}
};
var map = null;
var infoWindow = null;
function load(){
map = new google.maps.Map(document.getElementById(map),{
center:new google.maps.LatLng(-29.86519774,30.98538962) ,
zoom:18,
mapTypeId:'terrain'
});
infoWindow = new google.maps.InfoWindow;
//根据PHP文件的名称进行更改
BindMarker();
}
函数BindMarker(){
downloadUrl(genxml.php,function(data){
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName(marker);
for(var i = 0; i< markers.length; i ++){
var point = new google.maps.LatLng(
parseFloat(markers [i] .getAttribute(lat)),
parseFloat(markers [i] .getAttribute(lon)));
var icon = customIcons [blue] || {};
var marker = new google.maps.Marker({
map:map,
position :点,
图标:icon.icon,
shadow:icon.shadow
});
markers.push(marker);
bindInfoWindow(标记,map,infoWindow);
}
});
}
函数bindInfoWindow(marker,map,infoWindow){
google.maps.event.addListener(marker,'click',function(){
infoWindow.open(map,marker);
});
}
函数downloadUrl(url,callback){
var request = window.ActiveXObject?
new ActiveXObject('Microsoft.XMLHTTP'):
new XMLHttpRequest;
request.onreadystatechange = function(){
if(request.readyState == 4){$ b $brequest.önreadystatechange= doNothing;
回调(request,request.status);
}
};
request.open('GET',url,true);
request.send(null);
}
函数doNothing(){}
//
< / script>
< / head>
< body onload =load()>
< div id =mapstyle =width:1000px; height:600px>< / div>
< / body>
< / html>
Hey there, I am following this tutorial:
https://developers.google.com/kml/articles/phpmysqlkml[^]
it works beuatifully. I read in data from the database and generate an XML file and overlay it on google maps.
The code is exactly like the tutorial. the problem now is i am auto-refreshing the html page which calls the php page. the php script generates the XML file. I am using the Meta header to auto refresh the html page. it is extremely annoying to see the entire page reload every 5 seconds. I require a refresh as I am building a remote logger that has dynamic capability.
I would like to just refresh the markers. and not the page. The html file code is below. please help urgently. thanks
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drifter</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
setTimeout(function () {
window.location.reload();
}, 5000);
var customIcons = {
blue: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
red: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-29.86519774,30.98538962),
zoom: 18,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var icon = customIcons["blue"] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow);
}
});
}
function bindInfoWindow(marker, map, infoWindow) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request. önreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//
</script>
</head>
<body onload="load()">
<div id="map" style="width: 1000px; height: 600px"></div>
</body>
</html>
thanks
Try This I am usingsetInterval
<!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Drifter</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![CDATA[ var markers = []; setInterval(function () { DeleteMarkers(); BindMarker(); }, 5000); function DeleteMarkers() { //Loop through all the markers and remove for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; }; var customIcons = { blue: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, red: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' } }; var map = null; var infoWindow = null; function load() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(-29.86519774, 30.98538962), zoom: 18, mapTypeId: 'terrain' }); infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file BindMarker(); } function BindMarker() { downloadUrl("genxml.php", function (data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lon"))); var icon = customIcons["blue"] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); markers.push(marker); bindInfoWindow(marker, map, infoWindow); } }); } function bindInfoWindow(marker, map, infoWindow) { google.maps.event.addListener(marker, 'click', function () { infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function () { if (request.readyState == 4) { request.önreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() { } // </script> </head> <body onload="load()"> <div id="map" style="width: 1000px; height: 600px"></div> </body> </html>
这篇关于自动刷新Google地图标记。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!