bonjour à tous,
je travail sur un projet de geolocalisation et j'ai problème.
j'ai une base données qui reçoit les données envoyées par mon module gps toutes les 50s. ensuite j'affiche ces données sur une carte google map.
mon problème est que lorsque le véhicule se déplace a grande vitesse on constate sur la carte qu'on se déplace d'un point A vers un point B.Or l'objectif est de donner l'impression qu'on suite le véhicule en temps réel.Pour cela j'ai j'aimerias definir un autre marqueur qui va suivre de façon rectiligne la trajectoire entre 2 points successifs mais je sais pas comment m'y prendre.
j'ai besion de votre aide.
function load() {
GDownloadUrl("parser.php", function(data) {
map.clearOverlays();
var xml = GXml.parse(data);
var bounds = new GLatLngBounds();
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers.getAttribute("name");
var address = markers.getAttribute("address");
var lat = markers.getAttribute("lat");
var lng = markers.getAttribute("lng");
var type = markers.getAttribute("type");
var point = new GLatLng(parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var marker = createMarker(point, name, address, type,lat,lng);
bounds.extend( marker.getLatLng() );
map.addOverlay(marker);
}
// map.setCenter( bounds.getCenter(), map.getBoundsZoomLevel(bounds) );
// map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
// map.setZoom(18);
});
console.log("Load");
// map.setZoom(18);
}
function createMarker(point, name, address, type,lat,lng) {
var marker = new GMarker(point, customIcons[type]);
// var html= <br /><br /><b>BrightCherry Web Design</b><br />Allen House Business Centre,<br />Unit P4,<br />The Maltings, Station Road,<br />Sawbridgeworth,<br />Hertfordshire,<br />;
var html = "<b> <b>POSITION COURANTE <br/></b><b>vitesse: </b>" + name + " </b> <br/> <b>IMEI: </b>" + address + "<br/> <b>LATITUDE: </b> </b>" + lat + "</b> <br/> <b>LONGITUDE: </b> " + lng;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var timer = null;
function startRefresh() {
console.log("startRefresh");
timer = window.setInterval(load, 5000);
}
function stopRefresh() {
console.log("stopRefresh");
window.clearInterval(timer);
timer = null;
}
function toggleRefreshButton() {
var ss_btn = document.getElementById("start_stop_refresh");
if(null == timer) {
startRefresh();
ss_btn.innerHTML = "Stop refresh";
}
else {
stopRefresh();
ss_btn.innerHTML = "Start refresh";
}
}
var map = null; // variable globale
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP );
map.addMapType(G_PHYSICAL_MAP);
map.enableGoogleBar();
//var bounds = new GLatLngBounds;
// map.getBoundsZoomLevel(bounds);
// map.setZoom(18);
load();
toggleRefreshButton();
document.getElementById("start_stop_refresh").addEventListener("click", toggleRefreshButton, false);
}
console.log("Init");
map.setZoom(18);
}
window.addEventListener("load", init, false);
window.addEventListener("unload", GUnload, false);
//]]>
</script>
merci pour d'avance pour votre aide.
je travail sur un projet de geolocalisation et j'ai problème.
j'ai une base données qui reçoit les données envoyées par mon module gps toutes les 50s. ensuite j'affiche ces données sur une carte google map.
mon problème est que lorsque le véhicule se déplace a grande vitesse on constate sur la carte qu'on se déplace d'un point A vers un point B.Or l'objectif est de donner l'impression qu'on suite le véhicule en temps réel.Pour cela j'ai j'aimerias definir un autre marqueur qui va suivre de façon rectiligne la trajectoire entre 2 points successifs mais je sais pas comment m'y prendre.
j'ai besion de votre aide.
function load() {
GDownloadUrl("parser.php", function(data) {
map.clearOverlays();
var xml = GXml.parse(data);
var bounds = new GLatLngBounds();
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers.getAttribute("name");
var address = markers.getAttribute("address");
var lat = markers.getAttribute("lat");
var lng = markers.getAttribute("lng");
var type = markers.getAttribute("type");
var point = new GLatLng(parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var marker = createMarker(point, name, address, type,lat,lng);
bounds.extend( marker.getLatLng() );
map.addOverlay(marker);
}
// map.setCenter( bounds.getCenter(), map.getBoundsZoomLevel(bounds) );
// map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
// map.setZoom(18);
});
console.log("Load");
// map.setZoom(18);
}
function createMarker(point, name, address, type,lat,lng) {
var marker = new GMarker(point, customIcons[type]);
// var html= <br /><br /><b>BrightCherry Web Design</b><br />Allen House Business Centre,<br />Unit P4,<br />The Maltings, Station Road,<br />Sawbridgeworth,<br />Hertfordshire,<br />;
var html = "<b> <b>POSITION COURANTE <br/></b><b>vitesse: </b>" + name + " </b> <br/> <b>IMEI: </b>" + address + "<br/> <b>LATITUDE: </b> </b>" + lat + "</b> <br/> <b>LONGITUDE: </b> " + lng;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var timer = null;
function startRefresh() {
console.log("startRefresh");
timer = window.setInterval(load, 5000);
}
function stopRefresh() {
console.log("stopRefresh");
window.clearInterval(timer);
timer = null;
}
function toggleRefreshButton() {
var ss_btn = document.getElementById("start_stop_refresh");
if(null == timer) {
startRefresh();
ss_btn.innerHTML = "Stop refresh";
}
else {
stopRefresh();
ss_btn.innerHTML = "Start refresh";
}
}
var map = null; // variable globale
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP );
map.addMapType(G_PHYSICAL_MAP);
map.enableGoogleBar();
//var bounds = new GLatLngBounds;
// map.getBoundsZoomLevel(bounds);
// map.setZoom(18);
load();
toggleRefreshButton();
document.getElementById("start_stop_refresh").addEventListener("click", toggleRefreshButton, false);
}
console.log("Init");
map.setZoom(18);
}
window.addEventListener("load", init, false);
window.addEventListener("unload", GUnload, false);
//]]>
</script>
merci pour d'avance pour votre aide.