เพิ่มเครื่องหมายลงในแผนที่ 3 มิติ

เลือกแพลตฟอร์ม: Android iOS JavaScript

ใช้เครื่องหมายเพื่อแสดงตำแหน่งเดียวบนแผนที่ หน้านี้แสดงวิธีเพิ่มตัวทำเครื่องหมายลงในแผนที่โดยใช้โปรแกรมและ HTML

เพิ่มเครื่องหมายโดยใช้ HTML

หากต้องการเพิ่มตัวทำเครื่องหมาย 3 มิติโดยใช้ HTML ให้เพิ่มองค์ประกอบย่อย gmp-marker-3d ลงในองค์ประกอบ gmp-map-3d ข้อมูลโค้ดต่อไปนี้แสดงการเพิ่มเครื่องหมายลงในหน้าเว็บ

<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>

เพิ่มเครื่องหมายโดยใช้โปรแกรม

หากต้องการเพิ่มตัวทำเครื่องหมาย 3 มิติลงในแผนที่แบบเป็นโปรแกรม ให้สร้าง Marker3DElement ใหม่ โดยส่งผ่านพิกัด lat/lng และการอ้างอิงถึงแผนที่ฐาน ดังที่แสดงในตัวอย่างนี้

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();

ขั้นตอนถัดไป