简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mapbox JS zum Abrufen von Längen- und Breitengraden aus PHP MySql
P粉316110779
P粉316110779 2024-01-07 10:38:48
0
1
445

GELÖST – Siehe Antwort unten

Ich habe eine MySQL-Datenbank mit dem Namen „locationLogs“ und eine Tabelle mit dem Namen „locations“. Ich habe eine Seite namens „map.php“, die eine Karte anzeigt (mithilfe der Mapbox GLJS-API). Dann möchte ich für jeden Standort in der Tabelle „Standorte“ eine Markierung hinzufügen. Die Tabelle besteht aus „id“, „longitude“ und „latitude“. Dann habe ich eine While-Schleife verwendet, um dies zu versuchen. Wenn Sie jedoch auf diese Seite gehen, wird sie einfach leer angezeigt und es wird keine Karte oder ähnliches geladen. Mein Seitencode ist wie folgt. 

<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

Antworte allen(1)
P粉821808309
P粉8218083092024-01-08 00:58:16 1 Etage

我必须重新编写很多代码才能使其正常工作。我将在下面附上完整的代码文件。数据库结构为：

表：位置

id 经度纬度 显示名称 显示描述

?>



    
    Live Map
    
    
    
    
    
    







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.
');
         }

?>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！