تعرض 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();
تثبيت نافذة منبثقة على علامة
يمكنك تثبيت النوافذ المنبثقة على العلامات. عند إضافة نافذة منبثقة مرتبطة بعلامة، عليك ضبط الخيار 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();
ربط نافذة منبثقة بعلامة باستخدام 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();