النوافذ المنبثقة

تعرض popover محتوًى (نصًا أو صورًا عادةً) في نافذة حوار أعلى الخريطة وفي موقع جغرافي معيّن. تتضمّن النافذة المنبثقة منطقة محتوى وساقًا مستدقًا. تكون نهاية الساق متصلة بموقع جغرافي محدّد على الخريطة. تظهر النوافذ المنبثقة كحوار لقارئات الشاشة.

عادةً ما يتم إرفاق نافذة منبثقة بعلامة تفاعلية، ولكن يمكنك أيضًا إرفاق نافذة منبثقة بإحداثية LatLngAltitude معيّنة أو إزاحتها من علامة.

إضافة نافذة منبثقة

يأخذ الدالة الإنشائية PopoverElement كائنًا حرفيًا من PopoverElementOptions يحدّد المعلمات الأولية لعرض النافذة المنبثقة.

يحتوي الكائن الحرفي PopoverElementOptions على الحقول التالية:

• positionAnchor: موضع LatLngAltitude الذي سيتم عرض العلامة فيه. في حال استخدام علامة، سيتم استخدام موضع العلامة بدلاً من ذلك.
• altitudeMode: طريقة تفسير ارتفاع النافذة المنبثقة.
• lightDismissDisabled: ما إذا كانت النافذة المنبثقة تظل مفتوحة عندما ينقر المستخدم خارجها أو يضغط على مفتاح Esc. عند ضبط هذا الخيار على true، يمكن عرض عدة نوافذ منبثقة في الوقت نفسه على الخريطة.lightDismissDisabled
• open: يحدّد ما إذا كان يجب فتح النافذة المنبثقة أم لا. القيمة التلقائية هي false.

قد يحتوي محتوى PopoverElement على سلسلة نصية أو مقتطف HTML أو عنصر DOM. يمكنك ضبط المحتوى عن طريق إلحاقه بـ PopoverElement بشكلٍ صريح في خانة header أو default.

إذا أردت تحديد حجم المحتوى بشكلٍ صريح، يمكنك وضعه في عنصر <div> وتنسيق <div> باستخدام CSS. تكون النوافذ المنبثقة قابلة للتمرير تلقائيًا، ولها حد أقصى للارتفاع محدّد مسبقًا.

ملاحظة مهمة: للحصول على أفضل تجربة مستخدم، يجب أن تكون نافذة منبثقة واحدة فقط مفتوحة على الـ خريطة في أي وقت. تؤدي النوافذ المنبثقة المتعدّدة إلى ظهور الخريطة بشكلٍ غير منظّم. إذا كنت بحاجة إلى نافذة منبثقة واحدة فقط في كل مرة، يمكنك إنشاء كائن PopoverElement واحد فقط وفتحه في مواقع أو علامات مختلفة في أحداث الخريطة، مثل نقرات المستخدم. إذا كنت بحاجة إلى أكثر من نافذة منبثقة، يمكنك عرض عدة كائنات PopoverElement في الوقت نفسه عن طريق ضبط lightDismissDisabled على true.

تثبيت نافذة منبثقة بإحداثية LatLngAltitude

عند إنشاء نافذة منبثقة، لا يتم عرضها تلقائيًا على الخريطة. لإظهار النافذة المنبثقة، عليك ضبط الخيار open على true في PopoverElement. يمكنك تنفيذ هذا الإجراء أثناء الإنشاء أو بعد إنشاء مثيل.

async function init() {
    const { Map3DElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const popover = new PopoverElement({
        altitudeMode: 'ABSOLUTE',
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });

    popover.append('Golden Gate Bridge');

    map.append(popover);

    document.body.append(map);
}

void init();
index.js

تثبيت نافذة منبثقة بعلامة

يمكنك تثبيت النوافذ المنبثقة بالعلامات. عند إضافة نافذة منبثقة مثبّتة بعلامة، يمكنك ضبط الخيار PopoverElement.positionAnchor لاستخدام العلامة.

async function init() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 'ABSOLUTE',
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 },
    });

    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });

    popover.append('Golden Gate Bridge');

    interactiveMarker.addEventListener('gmp-click', () => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });

    map.append(interactiveMarker);
    map.append(popover);

    document.body.append(map);
}

void init();
index.js

تثبيت نافذة منبثقة بعلامة باستخدام HTML

يمكنك أيضًا تثبيت النوافذ المنبثقة بالعلامات بدون كتابة أي رمز JavaScript، كما هو موضّح أدناه:

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

إضافة محتوى مخصّص إلى نافذة منبثقة

يمكنك إضافة محتوى مخصّص إلى النوافذ المنبثقة عن طريق ضبط الخيارَين header وcontent:

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();