Как динамически обновлять маркеры из базы данных на карте без обновления страницы?

Здравствуйте, я очень хорошо отобразил свои маркеры из базы данных на моей карте Google в php с помощью учебника из Google API v3 из этого ссылка на сайт .

Теперь в моем коде я загружаю позицию текущего пользователя, используя позицию наблюдения для динамического обновления позиции маркера.

Также он отправляет в мою базу данных mysql каждые 5 секунд координаты геолокации HTML5. Но как динамически обновлять каждые 30 секунд положение маркеров на карте, не обновляя страницу в моем случае?

Вот мой код (голова):

<script type="text/javascript">//<![CDATA[

var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};

setInterval(function load() {

var infoWindow = new google.maps.InfoWindow;// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {

var name = markers[i].getAttribute("name");

var id = markers[i].getAttribute("address");

var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));

var chaine = markers[i].getAttribute("address");
var reg=new RegExp("[ ,]+", "g");
var mot= chaine.split(reg);
// add each marker's location to the bounds
bounds.extend(point);

var html =  " Dernier statut : " + name + " <br><a  href=profil.php?id="+ mot[0] +">Cliquez-ici pour voir le profil de "+  mot[1] +"<a> <br><img with=28 src=images/message.png><a href=# alt="+ mot[0] +"|"+ mot[1] +" class=chat_user>Clavarder</a> ";

var icon = type;

var avatar = new google.maps.MarkerImage(icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(50, 50)
);var pictureLabel = document.createElement("img");
pictureLabel.src = type;var marker = new MarkerWithLabel({position: point,
draggable: false,
raiseOnDrag: false,
labelInBackground: false,

map: map,
labelContent: pictureLabel,
labelAnchor: new google.maps.Point(32, 84),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1}});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
// center and zoom the map to fit the bounds

}
// center and zoom the map to fit the bounds
map.fitBounds(bounds);
});}, 3000);

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);

}function doNothing() {}

//]]></script>
<?php
} ?>
<script>
$(function() {
var pull        = $('#pull');
menu        = $('nav ul');
menuHeight  = menu.height();

$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
setInterval(ajaxCall, 1000); //300000 MS == 5 minutes

function ajaxCall() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
$.ajax({
type: "POST",
url: "index.php",
data: {
x: position.coords.latitude,
y: position.coords.longitude
},

});

});
}
}
</script>

И php, который обновляет базу данных:

<div id="requete">
<?php
if (!isset($_SESSION['email'])) {

} else {if (!isset($_POST['x']) AND !isset($_POST['y'])) {
} else {
$base = mysql_connect ('localhost', '', '');
mysql_select_db ('', $base);// lancement de la requête
$sql ='UPDATE membre SET lat="'.$_POST['x'].'", lon="'.$_POST['y'].'"   WHERE email="'.$_SESSION['email'].'"';// on exécute la requête (mysql_query) et on affiche un message au cas    où la requête ne se passait pas bien (or die)
mysql_query($sql) or die('Erreur SQL !'.$sql.'<br />'.mysql_error());

// on ferme la connexion à la base
mysql_close();

}
}
?></div>

огромное спасибо

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector