3D haritaya işaretçi ekleme

Platformu seçin: Android iOS JavaScript

Haritada tek konumları göstermek için işaretçileri kullanın. Bu sayfada, bir haritaya programlı olarak ve HTML kullanarak nasıl işaretçi ekleneceği gösterilmektedir.

HTML kullanarak işaretçi ekleme

HTML kullanarak 3D işaretçi eklemek için gmp-marker-3d öğesine gmp-map-3d alt öğesini ekleyin. Aşağıdaki snippet'te, bir web sayfasına işaretçi ekleme işlemi gösterilmektedir:

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

Programatik olarak işaretçi ekleme

Bir haritaya programatik olarak 3D işaretçi eklemek için yeni bir Marker3DElement oluşturun. Bu örnekte gösterildiği gibi, lat/lng koordinatlarını ve temel haritaya bir referansı iletin:

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

Sonraki adımlar