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> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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