简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
PHP MySql에서 경도와 위도를 가져오는 Mapbox JS
P粉316110779
P粉316110779 2024-01-07 10:38:48
0
1
487

해결됨 - 아래 답변 보기

"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粉316110779
P粉316110779

모든 응답(1)
P粉821808309
P粉8218083092024-01-08 00:58:16 1층

이 기능이 작동하려면 많은 코드를 다시 작성해야 했습니다. 아래에 전체 코드 파일을 첨부하겠습니다. 데이터베이스 구조는 다음과 같습니다:

테이블: 위치

id 경도 위도 표시 이름 표시 설명

으아아아
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！