Géolocalisation en PHP

**Manequin** · 26/02/2020, 21h22

Bonsoir les développeurs,
je travail dans une entreprise qui a des agences dans presque tout le pays.
L'entreprise me demande de mettre sur pied une interface web qui permettra d'afficher les sites des agences par géolocalisation.
De manière à ce qu'en cliquant sur l’icône de géolocalisation qu'on puisse afficher les information de l'agence(Nom du représentant, effectif du personnel, etc.) bien sur qu'on aurai déjà enregistré auparavant.)

Côté insertion programmation PHP-MYSQL je n'ai pas grand soucis.

Aides :
1) M'orientez sur l'outil à utiliser pour réaliser le projet.
2) Colorier la carte(Vert, orange, jaune, rouge, par exemple) du pays en fonction des données de la BD là où il y'a besoin de recrutement.

Cordialement !

**grunk** · 27/02/2020, 10h00

Rien de tout ce que tu veux faire concerne PHP. C'est exclusivement coté client.

Googlemap permet de faire tout ce que tu veux (mais sera certainement payant) , sinon des solutions comme leaflet sont pas mal

**Manequin** · 27/02/2020, 10h01

Bonjour les développeurs. Je suis tombé sur ce tuto et l'ai suivi à la lettre.
Quand je veux ouvrir ma page web, j'ai cette erreur :

Petit problème... Une erreur s'est produite

Google Maps ne s'est pas chargé correctement sur cette page. Pour plus d'informations techniques sur cette erreur, veuillez consulter la console JavaScript.

Besnoi d'aide.

Cordialement !

**Manequin** · 27/02/2020, 10h42

Envoyé par grunk

... sinon des solutions comme leaflet sont pas mal

Merci beaucoup pour la réponse.

J'ai suivi le tuto et là ça marche.
Mais le truc c'est que ils ont mis les données, statiques.
Je veux savoir comment puiser les puiser dans la base de données MySql et afficher dans la carte ?

Cordialement !

**Manequin** · 27/02/2020, 16h52

Bonsoir les développeurs, voilà ce que j'ai eu comme résultat et le code source de la page.

Nom : Capture.PNG
Affichages : 240
Taille : 104,0 Ko

Code source :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html>
    <html>
        <head>
 
            <title>Quick Start - Leaflet</title>
 
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
            <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
            <script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=Duoo3iVwNL4iIvguUMZkTK0e2BbFHJe5EUcY1xIoSeC5rSFmdSIdH7GqL_G7OMpakVZQGKGLWY5Lox0AOne1yynIb9ErM7v7SDj45_ujVoI" charset="UTF-8"></script>
            <link rel="stylesheet" crossorigin="anonymous" href="https://ff.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly9sZWFmbGV0anMuY29tL2V4YW1wbGVzL3F1aWNrLXN0YXJ0L2V4YW1wbGUuaHRtbA"/>
            <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
 
        </head>
        <body>
 
            <div id="mapid" style="width: 1350px; height: 640px;"></div>
            <script>
 
                var mymap = L.map('mapid').setView([3.865919, 11.515935], 6);
 
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    id: 'mapbox/streets-v11',
                    tileSize: 512,
                    zoomOffset: -1
                }).addTo(mymap);
 
                L.marker([3.865625, 11.531525]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Yaounde.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                    L.marker([9.319452, 13.397783]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Garoua.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
                    L.marker([10.612346, 14.339515]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Maroua.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
                    L.marker([7.316032, 13.579680]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Ngaoundere.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
                    L.marker([4.578434, 13.685016]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Bertoua.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                    L.marker([2.920539, 11.151981]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence d'Ebolowa.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                    L.marker([4.047545, 9.743175]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Douala.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
                    L.marker([5.481806, 10.418630]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Bafoussam.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                     L.marker([5.962295, 10.166012]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Bamenda.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                      L.marker([4.150277, 9.292962]).addTo(mymap)
                    .bindPopup("<b>Bonjour </b><br />Agence de Buea.<br />Cliquez sur moi pour avoir toutes mes informations").openPopup();
 
 
                L.circle([51.508, -0.11], 500, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).addTo(mymap).bindPopup("I am a circle.");
 
                L.polygon([
                    [51.509, -0.08],
                    [51.503, -0.06],
                    [51.51, -0.047]
                ]).addTo(mymap).bindPopup("I am a polygon.");
 
 
                var popup = L.popup();
 
                function onMapClick(e) {
                    popup
                        .setLatLng(e.latlng)
                        .setContent("You clicked the map at " + e.latlng.toString())
                        .openOn(mymap);
                }
 
                mymap.on('click', onMapClick);
            </script>
        </body>
    </html>

Mais mon épineux problème persiste : Comment récupérer les coordonnées des ces agences dans la base de données MySQL et donner à AJAX pour afficher dans la carte ?

Quand on sait bien que pour récupérer les données dans la BD, php est le meilleur et comment envoyer ces valeur à AJAX ?

CORDIALEMENT !

**Manequin** · 27/02/2020, 19h11

Je viens résoudre mon problème. Récupération d'une donnée php et la mettre dans une variable JAVASCRIPT OU AJAX.

Cordialement !

Géolocalisation en PHP

Langage PHP

Discussions similaires

Partager

Partager