이 튜토리얼에서는 Maps JavaScript에서 실사 3D 지도를 사용하여 첫 번째 JavaScript 프로그램을 만드는 과정을 안내합니다. 이 프로그램은 배경에 Marin Headlands를 포함하여 금문교의 오버헤드 뷰를 간단히 표시하는 간단한 창입니다.
튜토리얼을 완료하면 개발 환경에 다음 맵이 표시됩니다.
환경 설정하기
코드 작성을 시작하기 전에 JavaScript를 실행하는 환경을 설정해야 합니다. 이 튜토리얼에서는 웹브라우저를 환경으로 사용합니다. 모든 최신 웹브라우저에는 JavaScript 지원이 내장되어 있으므로 추가 소프트웨어를 설치할 필요가 없습니다.
- 원하는 텍스트 편집기를 엽니다.
- 새 파일을 만들고
.html확장자 (예:hello-p3djs.html).
HTML 페이지 작성
먼저 기본 HTML 구조로 웹페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
JavaScript 추가
다음으로 지도를 로드하기 위한 JavaScript 코드를 추가합니다. 코드에는 다음 두 가지 요소가 포함되어 있습니다.
gmp-map-3d에는 시작 카메라 위치와 뷰를 초기화하는 데 사용되는 매개변수가 포함됩니다.script에는 Maps JavaScript API를 로드하는 호출이 포함됩니다.YOUR_KEY를 API 키로 바꾸세요.
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
프로그램 실행
프로그램을 실행하고 출력을 확인하려면 다음 단계를 따르세요.
- 생성한 HTML 파일을 저장합니다.
- 웹브라우저에서 파일을 엽니다. 파일을 더블클릭하거나 브라우저 창으로 드래그하거나 마우스 오른쪽 버튼으로 클릭하여 '연결 프로그램'을 사용합니다.
- 브라우저 창에 지도가 표시됩니다.
수고하셨습니다 Google의 Maps JavaScript API 실사 3D 지도를 사용하여 프로그램을 작성했습니다.