Thêm điểm đánh dấu vào bản đồ 3D

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

Sử dụng điểm đánh dấu để hiển thị các vị trí riêng lẻ trên bản đồ. Trang này trình bày cách thêm một điểm đánh dấu vào bản đồ theo phương thức lập trình và bằng cách sử dụng HTML.

Thêm điểm đánh dấu bằng HTML

Để thêm một điểm đánh dấu 3D bằng HTML, hãy thêm một phần tử con gmp-marker-3d vào phần tử gmp-map-3d. Đoạn mã sau đây cho biết cách thêm điểm đánh dấu vào một trang web:

<html>
    <head>
        <title>3D Marker HTML</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="40.7489,-73.9680,0"
            heading="315"
            tilt="65"
            range="800"
            mode="SATELLITE">
            <gmp-marker position="40.7489,-73.9680" title="UN Headquarters">
                <div class="custom-marker">
                    United Nations Secretariat Building
                </div>
            </gmp-marker>
        </gmp-map-3d>
    </body>
</html>

Thêm một điểm đánh dấu theo phương thức lập trình

Để thêm một điểm đánh dấu 3D vào bản đồ theo cách lập trình, hãy tạo một Marker3DElement mới, truyền toạ độ lat/lng và một tham chiếu đến bản đồ cơ sở, như trong ví dụ này:

async function init() {
    // Make sure the Marker3DElement is included.
    const { Map3DElement, Marker3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 },
        tilt: 67.5,
        range: 1000,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    const marker = new Marker3DElement({
        position: { lat: 37.4239163, lng: -122.0947209, altitude: 50 }, // (Required) Marker must have a lat / lng, but doesn't need an altitude.
        altitudeMode: 'ABSOLUTE', // (Optional) Treated as CLAMP_TO_GROUND if omitted.
        extruded: true, // (Optional) Draws line from ground to the bottom of the marker.
        label: 'Basic Marker', // (Optional) Add a label to the marker.
    });

    map.append(marker); // The marker must be appended to the map.
    document.body.append(map);
}

void init();

Các bước tiếp theo