salut à tous.
J'ai développé une application de géolocalisation avec l'API Google Maps V3. Mon Application permet de faire le monitoring sur une carte c'est à dire j'attaque une base de données (La base de données de solar winds) je récupère les informations sur l'équipement comme la latitude la longitude l'adresse IP et le statut ensuite j'affiche l'équipement sur une carte avec un marqueur vert lorsque le statut de l'équipement est 1(UP) et le marqueur sera de couleur rouge lorsque le statut de l'équipement sera à 2 (DOWN). ceci marche parfaitement je vais vous montrer mon code. Maintenant il s'est présenté le besoin de tracer les itinéraires du parcours du cablage réseau sur la carte c'est à dire le tracé d'itinéraire de notre réseau. J'ai télécharge l'API de Google Map pour le tracé (API DRAWING) que j'ai ajouté à mon code le tracé s'effectue bien mais après une réactualisation de la page il ne persite pas. J'ai pensé à stocké le tracé des polilynes dans la BD mais je ne sais comment faire. quelqu'un aurait t'il une idée pour m'aider à faire persisté mes tracé de fibre sur la carte?
J'attends une réponse s'il vous plait
Cordialement
Voici mon code complet
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title> Solar Winds Swecom </title>
	 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
    //<![CDATA[
 
   var customIcons = {
      1: {
       icon: 'marker3.png',
     },
      2: {
       icon: 'marker4.png',
     }
   };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(4.0469, 9.7084),
        zoom: 15,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP,
		             google.maps.MapTypeId.SATELLITE]
      });
      var infoWindow = new google.maps.InfoWindow;
 
 
 
      // Change this depending on the name of your PHP file
      downloadUrl("connect_solarwinds.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var City = markers[i].getAttribute("City");
          var Caption = markers[i].getAttribute("Caption");
		  var name = markers[i].getAttribute("name");
          var adress = markers[i].getAttribute("adress");
          var Status = parseInt(markers[i].getAttribute("Status"));
          var IP_Address = markers[i].getAttribute("IP_Address");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + City + "</b> <br/> <b>" + Caption + "</b> <br/> <b>" + name + "</b> <br/>" + adress + "<br/> @IP : " + IP_Address;
          var icon = customIcons[Status] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
 
	   var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
 
  drawingManager.setMap(map);
 
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
    console.log(event.overlay.getPath().getArray());
  }
});
    }
 
    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() {}
 
	google.maps.event.addDomListener(window, 'load', load);
 
    //]]>
  </script>
  </head>
 
  <body>
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>
</html>