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

تعرض 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',
    });

    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',
    });

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