Bắt đầu

Trong hướng dẫn này, bạn sẽ tự hướng dẫn cách tạo chương trình JavaScript đầu tiên bằng cách sử dụng Bản đồ 3D ảnh thực trong JavaScript trên Maps: một cửa sổ đơn giản hiển thị khung cảnh nhìn từ trên cao của Cầu Cổng Vàng với hướng đi của Marin Headland.

Sau khi hoàn tất hướng dẫn, bạn sẽ thấy bản đồ sau trong môi trường phát triển của mình:

Thiết lập môi trường

Trước khi bắt đầu viết mã, bạn phải thiết lập một môi trường chạy JavaScript. Đối với hướng dẫn này, bạn sẽ sử dụng trình duyệt web làm môi trường của mình. Tất cả trình duyệt web hiện đại đều tích hợp sẵn tính năng hỗ trợ JavaScript, vì vậy, bạn không cần cài đặt thêm phần mềm nào.

  1. Mở một trình chỉnh sửa văn bản mà bạn chọn.
  2. Tạo một tệp mới rồi lưu bằng đuôi .html (ví dụ: hello-p3djs.html).

Viết trang HTML

Để bắt đầu, bạn sẽ tạo một trang web có cấu trúc HTML cơ bản:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

Thêm JavaScript

Tiếp theo, bạn sẽ thêm mã JavaScript để tải bản đồ. Mã này chứa 2 phần tử:

  • gmp-map-3d chứa các tham số dùng để khởi tạo vị trí và khung hiển thị của camera ban đầu.
  • script chứa lệnh gọi để tải Maps JavaScript API. Hãy nhớ thay thế YOUR_KEY bằng khoá 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>

Chạy chương trình

Để chạy chương trình và xem kết quả, hãy làm theo các bước sau:

  1. Lưu tệp HTML bạn đã tạo.
  2. Mở tệp trong trình duyệt web (bạn có thể nhấp đúp vào tệp, kéo tệp vào một cửa sổ trình duyệt hoặc nhấp chuột phải và sử dụng "Mở bằng").
  3. Bạn sẽ thấy bản đồ trong cửa sổ trình duyệt của mình.

Xin chúc mừng! Bạn vừa viết một chương trình bằng cách sử dụng bản đồ 3D ảnh thực tế bằng API JavaScript API của Google.

Các bước tiếp theo

  • Tạo trải nghiệm bản đồ 3D phức tạp hơn bằng cách sử dụng các mẫu hiện có của Google.
  • Khám phá toàn bộ tiềm năng của Maps 3D trong API JavaScript của Maps bằng cách đọc tài liệu tham khảo.