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

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

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

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

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

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

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

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

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

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

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

async function init() {
    const { AltitudeMode, Map3DElement, MapMode, 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: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: 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);
}
init();
index.js

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

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

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, 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: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 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', (event) => {
        // 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);
}
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();