简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mapbox JS untuk mendapatkan longitud dan latitud daripada PHP MySql
P粉316110779
P粉316110779 2024-01-07 10:38:48
0
1
481

SELESAI - Lihat jawapan di bawah

Saya mempunyai pangkalan data MySql bernama "locationLogs" dan jadual bernama "locations". Saya mempunyai halaman bernama map.php yang memaparkan peta (menggunakan API Mapbox GLJS). Kemudian saya ingin menambah penanda untuk setiap lokasi dalam jadual "Lokasi". Jadual terdiri daripada "id", "longitud" dan "latitud". Kemudian saya menggunakan gelung sementara untuk mencuba ini. Walau bagaimanapun, apabila pergi ke halaman itu, ia hanya menunjukkan kosong dan tidak memuatkan peta atau apa-apa sahaja. Kod halaman saya adalah seperti berikut. 

<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

membalas semua(1)
P粉821808309
P粉8218083092024-01-08 00:58:16 Tingkat 1

Saya terpaksa menulis semula banyak kod untuk membolehkannya berfungsi. Saya akan melampirkan fail kod lengkap di bawah. Struktur pangkalan data ialah:

Jadual: Lokasi

id longitud latitud paparan paparan nama penerangan

?>



    
    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
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！