Mapbox JS untuk mendapatkan longitud dan latitud daripada PHP MySql
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>