已解決 - 請參閱下面的答案
我有一個名為「locationLogs」的 MySql 資料庫和一個名為「locations」的表。我有一個名為 map.php 的頁面,它顯示地圖(使用 Mapbox GLJS API)。然後,我想為「位置」表中的每個位置新增一個標記。表格由「id」、「經度」和「緯度」組成。然後我使用 while 循環來嘗試這個。然而,當進入該頁面時,它只顯示空白,並且不載入地圖或任何內容。我的頁面程式碼如下。
<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>
我必須重新編寫很多程式碼才能使其正常工作。我將在下面附上完整的程式碼文件。資料庫結構為:
表:位置
id 經度緯度 顯示名稱 顯示描述