Dévélopper une application de géolocalisation

**leking2011** · 03/01/2014, 18h37

Je souhaite développé une application de géolocalisation pour des équipements tels que les décodeurs histoire d'optimiser les interventions des techniciens chez les clients abonnés d'un Fournisseur d'Accès internet /Télévision Numérique & Téléphonie.
Je suis novice dans le développement sur Google Maps API V3 et j'ai besoin des conseils pour démarrer mon projet ainsi que des Tutos qui pourront m'aider.

**NoSmoking** · 04/01/2014, 11h05

Bonjour,
difficile de répondre juste comme cela!

L'intégration d'un Map Google ne relève d'aucun exploit.

FAQ API Google Maps

La géolocalisation ce fait tout aussi simplement

L'API geolocalisation en HTML5

Pour le reste il s'agit de la gestion d'une base de données et de l'interrogation de celles ci.

Mais pour commencer il suffit de bien définir son besoin

**leking2011** · 06/03/2014, 18h14

Bonsoir à tous J'ai avancé dans mon application de géolocalisation et elle est presque en phase terminale. Je devais attaquer une base de données de monitoring pour afficher l'état de mes équipements et leur emplacement sur la carte Google Maps. C'est à dire lorsque l'équipement est Up j'affiche le marqueur vert et lorsque l'équipement est Down j'affiche le marqueur Rouge. J'ai regardé un exemple sur google et on m'a conseillé ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 var customIcons = {
      restaurant: {
        icon: 'image1.png'
      },
      bar: {
        icon: 'image2.png'
      }
    };

Mais la table avec laquelle je travaille dans ma base de données cet attribut est un entier donc l'attribut Status vaut 1 quand l'équipement est Up et 2 quand l'équipement est Down.
Du coup j'ai transformé le code en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 var customIcons = {
      1: {
        icon: 'image1.png'
      },
      2: {
        icon: 'image2.png'
      }
    };

Mais malheureusement il ne fonctionne pas. je voudrais savoir comment je peux appliquer cette structure avec des entiers et non des chaines de caractères.

**NoSmoking** · 06/03/2014, 22h56

Mais malheureusement il ne fonctionne pas. je voudrais savoir comment je peux appliquer cette structure avec des entiers et non des chaines de caractères.

Ta deuxième syntaxe est tout à fait correcte seulement pour l'appel il faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log( customIcons[2].icon);  // affiche image2.png

Dans ton cas pourquoi ne pas plutôt passer par un Array si tu n'a pas plus de chose à mettre dans tes objets.

**leking2011** · 07/03/2014, 11h00

Merci pour l'aide mais je sais pas à quel niveau je suis sensé faire l'appel.
Voici l'intégralité.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    // Je veux donc afficher le marker 4 quand l'attribut type vaut 1 et le marker 3 quand l'attribut type vaut 2
    var customIcons = {
      1: {
        icon: 'marker4.png',
      },
      2: {
        icon: 'marker3.png',
      }
    };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml2.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 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 html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }
 
    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>
  </head>
 
  <body onload="load()">
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>
</html>

C'est la page HTML qui lance la carte. j'ai un fichier php qui se charge de récupérer les informations dans la base de données et le parser en xml.

**NoSmoking** · 08/03/2014, 17h32

Dans ce que tu proposes je vois au moins une erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow   // icon.shadow N'EST PAS DEFINI
});

et une interrogation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;

es tu sûr que data est au format XMLHttpRequest?

Dévélopper une application de géolocalisation [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager