Bonjour
j'ai une petite problème et j’espère que quelqu’un m'aider,
mon code permet de faire apparaitre la position du marqueur chaque 5 secondes , et tout ça est développer en APIV2 et je veux le rendre en APIV3
j'essaye plusieurs fois mais malheureusement pas de résultat :s
et je suis bloquée depuis un long temps voilà le code originale qui est développé en API V2:
et voilà mon code que j'ai tester :
et voilà mon fichier sql :
Merci de votre aide. [/i][/i]
Modifié par mreiwa (21 Apr 2012 - 09:53)
j'ai une petite problème et j’espère que quelqu’un m'aider,
mon code permet de faire apparaitre la position du marqueur chaque 5 secondes , et tout ça est développer en APIV2 et je veux le rendre en APIV3
j'essaye plusieurs fois mais malheureusement pas de résultat :s
et je suis bloquée depuis un long temps voilà le code originale qui est développé en API V2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Map test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAv4Q1uOL3I9E3TMXuNfqmXBRRw9x0kUfjFXPT2tErDgxsEiV9kBTnoBxFJsfq0eepyG_GRzWVf7HqTg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
<?php
//ouverture de la connexion à la base de données
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("markers",$connexion) or die(mysql_error());
//la requête pour obtenir la liste des points
$result = mysql_query("SELECT lattitude ,longitude FROM listePoints order by id");
//récupération de tous les points pour les mettre dans une table façon JavaScript
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=','; //ajoute la virgule de séparation des points
$listeDesPoints.='{ lat:'.$row{'lattitude'}.', lng:'.$row['longitude'].'}';
}
//et voilà $listeDesPoints est prêt à être affiché dans le script
//on ferme la connexion à la base de données
mysql_close($connexion);
?>
// Bus locations
var data = [
<?php echo $listeDesPoints; ?>
];
var map = null;
var route = null;
var busMarker = null;
var point = null;
var count = 0;
var delay = 2000;
var loops = 5;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-41.217573, 174.831952), 15);
addBusStops();
var point = new GLatLng(data[count].lat, data[count].lng);
busMarker = new GMarker(point);
map.addOverlay(busMarker);
//GLog.write("load " + busMarker.GetLatLng);
route = setTimeout("moveTheBus()", 5000);
}
}
function addBusStops() {
<?php
$listeDesPoints='';
while($row = mysql_fetch_array($result))
{
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints='['.$row['lattitude'].', '.$row['longitude'].']';
}
?>
}
function moveTheBus() {
count++;
if(count > data.length - 1) {
count = 0;
loops--;
}
//GLog.write("move the marker to " + data[count].lat + ", " + data[count].lng);
//GLog.write("busMarker before move = " + busMarker.getLatLng());
point = new GLatLng(data[count].lat, data[count].lng);
busMarker.setLatLng(point);
//GLog.write("busMarker after move = " + busMarker.getLatLng());
if (loops > 0)
{
route = setTimeout("moveTheBus()", delay);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 800px"></div>
</body>
</html>
et voilà mon code que j'ai tester :
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Google Map API V3</title>
<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<?php
//ouverture de la connexion à la base de données
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("markers",$connexion) or die(mysql_error());
//la requête pour obtenir la liste des points
$result = mysql_query("SELECT lattitude ,longitude FROM listePoints order by id");
//récupération de tous les points pour les mettre dans une table façon JavaScript
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=','; //ajoute la virgule de séparation des points
$listeDesPoints.='{ lat:'.$row{'lattitude'}.', lng:'.$row['longitude'].'}';
}
//et voilà $listeDesPoints est prêt à être affiché dans le script
//on ferme la connexion à la base de données
mysql_close($connexion);
?>
var liste_des_points=[
<?php echo $listeDesPoints; ?>];
var map = null;
var route = null;
var busMarker = null;
var point = null;
var count = 0;
var delay = 2000;
var loops = 5;
window.onload = function() {
// Cinéma Pathé Bellecour
var myLatlng = new google.maps.LatLng(-41.217678,174.832596);
// Carte centrée sur le cinéma
var myMapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Création de la carte
var myMap = new google.maps.Map(
document.getElementById('map'),
myMapOptions
);
addBusStops();
var point = new google.maps.LatLng(liste_des_points[count].lat, liste_des_points[count].lng);
busMarker = new google.maps.Marker(point);
map.addOverlay(busMarker);
//GLog.write("load " + busMarker.GetLatLng);
route = setTimeout("moveTheBus()", 5000);
}
function addBusStops() {
<?php
$listeDesPoints='';
while($row = mysql_fetch_array($result))
{
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints='['.$row['lattitude'].', '.$row['longitude'].']';
}
?>
}
// Création de l'icône
var myMarkerImage = new google.maps.MarkerImage('map-marker.png');
var i=0,
li=liste_des_points.length;
while(i<li){
new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
map: myMap,
title: "Marqueur-"+i,
icon: myMarkerImage
});
i++;
}
function moveTheBus() {
count++;
if(count > liste_des_points.length - 1) {
count = 0;
loops--;
}
//GLog.write("move the marker to " + data[count].lat + ", " + data[count].lng);
//GLog.write("busMarker before move = " + busMarker.getLatLng());
point = new google.maps.LatLng(liste_des_points[count].lat, liste_des_points[count].lng);
busMarker.setLatLng(point);
//GLog.write("busMarker after move = " + busMarker.getLatLng());
if (loops > 0)
{
route = setTimeout("moveTheBus()", delay);
}
}
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
et voilà mon fichier sql :
-- phpMyAdmin SQL Dump
-- version 3.3.9
-- http://www.phpmyadmin.net
--
-- Serveur: localhost
-- Généré le : Jeu 19 Avril 2012 à 11:57
-- Version du serveur: 5.5.8
-- Version de PHP: 5.3.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Base de données: `markers`
--
-- --------------------------------------------------------
--
-- Structure de la table `listepoints`
--
CREATE TABLE IF NOT EXISTS `listepoints` (
`id` int(111) NOT NULL,
`lattitude` varchar(111) NOT NULL,
`longitude` varchar(111) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Contenu de la table `listepoints`
--
INSERT INTO `listepoints` (`id`, `lattitude`, `longitude`) VALUES
(2, '-41.217678', '174.832596 '),
(3, '-41.217177', '174.832939'),
(4, '-41.216669', '174.832209'),
(5, '-41.215636', '174.831887'),
(6, '-41.214667', '174.832124'),
(7, '-41.214094', '174.831930'),
(8, '-41.214490', '174.830793'),
(9, '-41.215023', '174.829999');
Merci de votre aide. [/i][/i]
Modifié par mreiwa (21 Apr 2012 - 09:53)