MySQL과 JavaScript를 사용하여 간단한 지도 표시 기능을 구현하는 방법
지도 표시 기능은 최신 웹 애플리케이션에서 매우 일반적이며 특정 위치를 표시하거나 위치 정보를 표시하거나 지리 데이터를 표시하는 데 사용할 수 있습니다. 이 기사에서는 MySQL 데이터베이스와 JavaScript를 사용하여 간단한 지도 표시 기능을 작성하는 방법을 다루고 구체적인 코드 예제를 제공합니다.
1. 준비
시작하기 전에 몇 가지 기본 환경과 도구를 준비해야 합니다.
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 코드를 작성해 보겠습니다.
<div id="map"></div> <button onclick="addMarker()">添加标记</button>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
