Điều khiển vị trí của camera

Trong Bản đồ 3D trong Maps JavaScript API, bạn quản lý tiêu điểm của camera bằng cách sử dụng tuỳ chọn cameraPosition.

Các hành vi chính:

  • Với center: Toạ độ vĩ độ và kinh độ chỉ định điểm chính xác trên bản đồ mà camera hướng đến.
  • Với cameraPosition: Bản thân camera được đặt tại toạ độ được cung cấp trong quá trình xây dựng. Điều này thường khiến bạn khó căn giữa chế độ xem vào một địa điểm yêu thích cụ thể.

Ví dụ sau minh hoạ việc khởi động bản đồ bằng cách sử dụng tuỳ chọn center để đảm bảo có một tiêu điểm cụ thể. Điểm đánh dấu cho biết điểm giữa được cung cấp trong center:

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Xem mã nguồn ví dụ hoàn chỉnh

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Thử mẫu

Trường nhìn và phạm vi

Bạn có thể điều chỉnh mức độ hiển thị của bản đồ trong khung nhìn bằng cách sử dụng 2 tham số riêng biệt: phạm vi và fov. Mặc dù cả hai đều ảnh hưởng đến mức "thu phóng", nhưng chúng hoạt động khác nhau:

  • range: Kiểm soát khoảng cách thực tế giữa camera và điểm trung tâm. Việc điều chỉnh tham số này tương đương với việc di chuyển camera đến gần hoặc ra xa bản đồ.

  • fov (Trường nhìn): Kiểm soát góc của ống kính camera. Giá trị cao hơn hoạt động như ống kính góc rộng, hiển thị nhiều hơn ở vùng ngoại vi, trong khi giá trị thấp hơn hoạt động như ống kính tiêu cự dài.

Phần so sánh sau đây cho thấy cùng một bản đồ ở hai đầu đối diện của phổ fov. Trong bản đồ bên trái, fov được đặt thành 5 (hẹp/tele); trong bản đồ bên phải, fov được đặt thành 80 (góc rộng).

So sánh song song hai hình ảnh kết xuất 3D từ trên không của Cầu Cổng Vàng. Phía bên trái cho thấy toàn cảnh cây cầu và bán đảo Marin Headlands. Phía bên phải là ảnh cận cảnh một tháp treo màu đỏ và mặt cầu ở góc dốc xuống.