简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mapbox JS pour obtenir la longitude et la latitude de PHP MySql
P粉316110779
P粉316110779 2024-01-07 10:38:48
0
1
485

RESOLU - Voir réponse ci-dessous

J'ai une base de données MySql nommée "locationLogs" et une table nommée "locations". J'ai une page appelée map.php qui affiche une carte (en utilisant l'API Mapbox GLJS). Ensuite, je souhaite ajouter un marqueur pour chaque emplacement dans le tableau "Emplacements". Le tableau se compose de « id », « longitude » et « latitude ». Ensuite, j'ai utilisé une boucle while pour essayer ceci. Cependant, lorsque vous accédez à cette page, elle s'affiche simplement vide et ne charge pas de carte ou quoi que ce soit. Le code de ma page est le suivant. 

<html lang='en'>
<head>
    <meta charset='utf-8' />
    <title>Live Map</title>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'MY_ACCESS_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 3
});

// code from the next step will go here!
<?php

$conn = mysql_connect("localhost", "DB_USER", "DB_PASS");

if (!$conn) {
    echo "Unable to connect to DB: " . mysql_error();
    exit;
}

if (!mysql_select_db("locationLogs")) {
    echo "Unable to select mydbname: " . mysql_error();
    exit;
}

$sql = "SELECT *
        FROM locations";

$result = mysql_query($sql);

if (!$result) {
    echo "Could not successfully run query ($sql) from DB: " . mysql_error();
    exit;
}

if (mysql_num_rows($result) == 0) {
    echo "No rows found, nothing to print so am exiting";
    exit;
}

?>


const geojson = {
  type: 'FeatureCollection',
  features: [
      <?php
      while ($row = mysql_fetch_assoc($result)) {
    echo '
    {
        type: "Feature",
        geometry: {
            type: "Point",
            coordintes: [' . $row['longitude'] . ', ' . $row['latitude'] . ']
        },
        properties {
            title: "Location",
            description: "A cool location",
        }
    },';
    
}

mysql_free_result($result);
?>
  ]
};

// add markers to map
for (const feature of geojson.features) {
  // create a HTML element for each feature
  const el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
}


</script>

</body>
</html>

P粉316110779
P粉316110779

répondre à tous(1)
P粉821808309
P粉8218083092024-01-08 00:58:16 1 plancher

J'ai dû réécrire beaucoup de code pour que cela fonctionne. Je joindrai le fichier de code complet ci-dessous. La structure de la base de données est :

Table : Localisation

id longitude latitude affichage du nom description de l'affichage

?>



    
    Live Map
    
    
    sssccc
    
    sssccc
    






sssccc
connect_errno ) {
            printf("Connect failed: %s
", $mysqli->connect_error);
            exit();
         }
         printf('Connected successfully.
');
         $sql = "SELECT * FROM location";
         
         $result = $mysqli->query($sql);
           
         if ($result->num_rows > 0) {
         } else {
            printf('Unexpected Error. DB did not return enough values for a successful export.
');
         }

?>

sssccc
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！