해결됨 - 아래 답변 보기
"locationLogs"라는 MySql 데이터베이스와 "locations"라는 테이블이 있습니다. Mapbox GLJS API를 사용하여 지도를 표시하는 map.php라는 페이지가 있습니다. 그런 다음 "위치" 테이블의 각 위치에 대한 마커를 추가하고 싶습니다. 테이블은 "id", "longitude", "latitude"로 구성됩니다. 그런 다음 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>
P粉8218083092024-01-08 00:58:16
이 기능이 작동하려면 많은 코드를 다시 작성해야 했습니다. 아래에 전체 코드 파일을 첨부하겠습니다. 데이터베이스 구조는 다음과 같습니다:
테이블: 위치
id 경도 위도 표시 이름 표시 설명
으아아아