Afficher une carte leaflet dans un code PHP

**Darkoos0410** · 08/06/2021, 19h33

Bonjour,

J'ai créer une carte leaflet sur un fichier séparer et je voudrais maintenant l'intégrer dans mon code PHP. Le fichier de la carte web et un fichier PHP donc on devrait faire

Code :

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

include ('maps.php');

mais cela ne marche pas.

Code HTML :

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
<div id="map">
	    <!-- Ici s'affichera la carte -->
		</div>
 
        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script>
            // On initialise la latitude et la longitude de Paris (centre de la carte)
            var lat = 48.837579;
            var lon = -1.597302;
                        var latM;
                        var lonM;
            var macarte = null;
                        
            window.onload = function()
                                                        {
                                                        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                                        initMap(); 
                                                        };      
                                        
                        // Fonction d'initialisation de la carte
                        function initMap() 
                        {
                                console.log("init lance")
                                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                                macarte = L.map('map').setView([lat, lon], 11);
                                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                        {       // Il est toujours bien de laisser le lien vers la source des données
                                                attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
                                                minZoom: 1,
                                                maxZoom: 20
                                        }).addTo(macarte);
                                requeteAjax();
                        };
                                        
                        function requeteAjax()
                        {
                                console.log("requeteAjax");
                                let id =document.getElementById("valeur").value.substr(7);
                                console.log(id);
                                if (id == "")
                                {
                                        console.log("Champs pas rempli !");
                                }
                                else
                                {
                                        var data = "Num_boitiers="+id;
                                        var url = "recupSQL.php";
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", url, true);
                                        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                        ajax.send(data);
                                        ajax.onreadystatechange = function() 
                                        {
                                                if (this.readyState == 4 && this.status == 200)
                                                {
                                                        console.log(this.responseText);
                                                        //On traite les données reçues
                                                        var data=JSON.parse(this.responseText);
                                                        console.log(data["Latitude"]);
                                                        var marqueur = L.marker([data["Latitude"], data["Longitude"]]).addTo(macarte);
                                                }
                                                else
                                                {
                                                        console.log(this.statusText);
                                                }       
                                        }
                                }
                                                // Nous ajoutons un marqueur
                                                //var marqueur = L.marker([lati, longi]).addTo(macarte);
                                                //marqueur.bindPopup("<p>Paris</p>");*/         
                        };
                                        
    </script>