Bắt đầu

Chọn nền tảng: Android iOS JavaScript

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

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

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. Trong hướng dẫn này, bạn sẽ sử dụng trình duyệt web làm môi trường. Tất cả trình duyệt web hiện đại đều có hỗ trợ tích hợp cho JavaScript, vì vậy, bạn không cần cài đặt thêm phần mềm nào.

  1. Mở trình chỉnh sửa văn bản mà bạn chọn.
  2. Tạo một tệp mới và lưu tệp đó 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:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Thêm JavaScript

Tiếp theo, bạn sẽ thêm một phần tử HTML tuỳ chỉnh để 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 chạy vị trí và chế độ xem ban đầu của máy ảnh.
  • script chứa lệnh gọi để tải Maps JavaScript API. Hãy nhớ thay thế YOUR_KEY bằng khoá API của bạn.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Chạy ứng dụng

Để chạy ứng dụng và xem kết quả, hãy làm theo các bước sau:

  1. Lưu tệp HTML mà 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 cửa sổ trình duyệt hoặc nhấp chuột phải rồi chọn "Mở bằng").
  3. Bạn sẽ thấy bản đồ trong cửa sổ trình duyệt.

Xin chúc mừng! Bạn vừa viết một ứng dụng bằng cách sử dụng Bản đồ 3D của Google trong Maps JavaScript API.

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ác mẫu hiện có của Google samples.
  • Khám phá toàn bộ tiềm năng của Bản đồ 3D trong Maps JavaScript API bằng cách đọc tài liệu tham khảo.