MySQL과 JavaScript를 사용하여 간단한 지도 표시 기능을 구현하는 방법

MySQL과 JavaScript를 사용하여 간단한 지도 표시 기능을 구현하는 방법

지도 표시 기능은 최신 웹 애플리케이션에서 매우 일반적이며 특정 위치를 표시하거나 위치 정보를 표시하거나 지리 데이터를 표시하는 데 사용할 수 있습니다. 이 기사에서는 MySQL 데이터베이스와 JavaScript를 사용하여 간단한 지도 표시 기능을 작성하는 방법을 다루고 구체적인 코드 예제를 제공합니다.

1. 준비
시작하기 전에 몇 가지 기본 환경과 도구를 준비해야 합니다.

1. MySQL 데이터베이스: 지도에 표시된 위치 정보를 저장하는 데 사용됩니다.
2. HTML, CSS, JavaScript와 같은 몇 가지 기본적인 프런트엔드 기술 도구입니다.
3. Apache나 Nginx와 같은 기본 서버 환경을 사용하여 코드를 실행합니다.

2. 데이터베이스 및 테이블 생성
먼저, 지도 마커의 위치 정보를 저장할 테이블을 MySQL 데이터베이스에 생성해야 합니다. 다음 SQL 문을 사용하여 "markers"라는 테이블을 만들 수 있습니다.

CREATE TABLE `markers` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `lat` FLOAT(10,6) NOT NULL,
  `lng` FLOAT(10,6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

이 테이블에는 id, name, lat 및 lng의 4개 필드가 포함되어 있습니다. id 필드는 자동으로 증가하는 기본 키이고, name 필드는 태그 이름을 저장하는 데 사용되며, lat 및 lng 필드는 각각 태그의 위도와 경도를 저장하는 데 사용됩니다.

3. 프런트엔드 코드 작성
다음으로 지도 표시 기능을 구현하기 위한 프런트엔드 HTML 및 JavaScript 코드를 작성해 보겠습니다.

1. HTML 코드
   HTML 코드에는 지도를 표시하고 새 마커를 추가하기 위한 "마커 추가" 버튼을 추가하기 위한 지도 컨테이너가 필요합니다. 예:

<div id="map"></div>

<button onclick="addMarker()">添加标记</button>

2. JavaScript code
   JavaScript 코드에서는 지도 API를 사용하여 지도를 로드하고 마커 추가 기능을 구현해야 합니다. 여기서는 Google Maps API를 사용하여 보여드리겠습니다. 먼저 Google Maps API가 포함된 HTML 파일에 <script> 태그를 추가해야 합니다. </script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

그런 다음 JavaScript 코드에서 다음 코드를 작성할 수 있습니다.

// 初始化地图
function initMap() {
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });
  
  // 加载标记
  loadMarkers(map);
}

// 加载标记
function loadMarkers(map) {
  // 发送异步请求获取标记数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 解析并显示标记
      var markers = JSON.parse(xhr.responseText);
      for (var i = 0; i < markers.length; i++) {
        var marker = new google.maps.Marker({
          position: {lat: markers[i].lat, lng: markers[i].lng},
          map: map,
          title: markers[i].name
        });
      }
    }
  };
  xhr.open('GET', 'get_markers.php', true);
  xhr.send();
}

// 添加标记
function addMarker() {
  // 获取标记的名称、纬度和经度
  var name = prompt('请输入标记的名称：');
  var lat = parseFloat(prompt('请输入标记的纬度：'));
  var lng = parseFloat(prompt('请输入标记的经度：'));
  
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'));
  
  // 创建标记对象
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    title: name
  });
  
  // 将标记保存到数据库
  saveMarker(name, lat, lng);
}

// 保存标记
function saveMarker(name, lat, lng) {
  // 发送异步请求将标记保存到数据库
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'save_marker.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + name + '&lat=' + lat + '&lng=' + lng);
}

위 코드에서는 먼저 initMap() 함수를 사용하여 지도를 초기화하고 loadMarkers() 함수를 호출하여 기존 마커를 로드합니다. . loadMarkers() 함수는 서버에 비동기 요청을 보내고, 마커 데이터를 얻고, Google Maps API를 사용하여 지도에 마커를 표시합니다.

addMarker() 함수에서는 프롬프트() 함수를 사용하여 사용자가 입력한 마커 이름, 위도, 경도를 가져오고 Google Maps API를 사용하여 지도에 마커를 추가합니다. 그런 다음 saveMarker() 함수를 호출하여 마커를 데이터베이스에 저장하라는 비동기 요청을 보냅니다.

4. 서버측 코드 작성
마지막으로 클라이언트의 요청을 처리하고 태그 데이터를 데이터베이스에 저장하기 위한 서버측 코드를 작성해야 합니다.

1. 마크업 저장
   PHP를 사용하여 마크업을 저장하는 서버측 코드를 작성할 수 있습니다. "save_marker.php"라는 파일을 만들고 다음 코드를 작성합니다:

<?php
// 获取标记的名称、纬度和经度
$name = $_POST['name'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];

// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 插入数据到数据库
$query = "INSERT INTO markers (name, lat, lng) VALUES ('$name', '$lat', '$lng')";
$mysqli->query($query);

// 关闭数据库连接
$mysqli->close();
?>

2. Getting markers
   마찬가지로 PHP를 사용하여 서버 측 코드를 작성하여 마커 데이터를 얻을 수 있습니다. "get_markers.php"라는 파일을 생성하고 다음 코드를 작성합니다.

<?php
// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 查询数据库中的标记数据
$query = "SELECT * FROM markers";
$result = $mysqli->query($query);

// 构建标记数组
$markers = array();
while ($row = $result->fetch_assoc()) {
  $markers[] = $row;
}

// 返回标记数据
echo json_encode($markers);

// 关闭数据库连接
$mysqli->close();
?>

위 코드에서는 먼저 MySQL 데이터베이스에 연결한 후 각각 "save_marker.php" 및 "get_markers.php"를 작성하여 태그를 저장합니다. 데이터베이스에 접속하여 태그 데이터를 가져옵니다.

5. 테스트 실행
위의 준비를 완료한 후, 해당 파일을 서버에 배포하고 브라우저에서 HTML 파일에 액세스하여 지도 표시 기능이 있는 페이지를 볼 수 있습니다.

"마커 추가" 버튼을 클릭하고 이름, 위도 및 경도를 입력하여 지도에 새 마커를 성공적으로 추가하세요. 동시에 표시된 데이터는 MySQL 데이터베이스에 저장됩니다.

요약
이번 글에서는 MySQL 데이터베이스와 자바스크립트를 사용해 간단한 지도 표시 기능을 작성하는 방법을 소개하고 구체적인 코드 예시를 제공했습니다. 이 예제를 통해 MySQL을 사용하여 지리 데이터를 저장하는 방법과 JavaScript 및 Google Maps API를 사용하여 지도 표시 기능을 구현하는 방법을 배울 수 있습니다. 지도 관련 애플리케이션 개발에 도움이 되길 바랍니다.

위 내용은 MySQL과 JavaScript를 사용하여 간단한 지도 표시 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!