إضافة علامة إلى خريطة ثلاثية الأبعاد

اختيار النظام الأساسي: Android iOS JavaScript

يمكنك استخدام العلامات لعرض مواقع جغرافية فردية على خريطة. توضّح هذه الصفحة كيفية إضافة علامة إلى خريطة بشكل آلي وباستخدام HTML.

إضافة علامة باستخدام HTML

لإضافة علامة ثلاثية الأبعاد باستخدام 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>

إضافة علامة بشكل آلي

لإضافة علامة ثلاثية الأبعاد إلى خريطة بشكل آلي، أنشئ 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();

الخطوات التالية