Map3DElement class
google.maps.maps3d.Map3DElement
class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"
Map3DElement הוא ממשק HTML לתצוגת מפה בתלת-ממד. שימו לב שצריך להגדיר את mode כדי שהמפה התלת-ממדית תתחיל להופיע.
<gmp-map-3d autofits-camera-animation="value-name" camera-position="lat,lng,altitude" center="lat,lng,altitude" default-ui-hidden description="string" fov="number" gesture-handling="value-name" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="value-name" range="number" roll="number" tilt="number"> </gmp-map-3d>
const {Map3DElement} = await google.maps.importLibrary("maps3d");
יצרן | |
|---|---|
Map3DElement |
Map3DElement([options])פרמטרים:
|
מאפיינים | |
|---|---|
attr: autofits-camera-animation |
ברירת המחדל:
noneהאנימציה שבה משתמשים להתאמה אוטומטית של המצלמה.
מאפיין HTML: autofits-camera-animation="value-name" |
bounds |
כשהאפשרות הזו מוגדרת, היא מגבילה את מיקום המצלמה לגבולות קווי הרוחב/האורך שצוינו. חשוב לזכור שאובייקטים מחוץ לגבולות עדיין מוצגים. הגבולות יכולים להגביל גם את קו האורך וגם את קו הרוחב, או להגביל רק את קו הרוחב או רק את קו האורך. כדי להגדיר גבולות של קווי רוחב בלבד, צריך להשתמש בקווי אורך מערביים ומזרחיים של -180 ו-180, בהתאמה. כדי להגדיר גבולות של קווי אורך בלבד, צריך להשתמש בקווי הרוחב הצפוניים והדרומיים 90 ו--90, בהתאמה. |
cameraPosition
attr: camera-position |
סוג הקלט:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalסוג הפלט: LatLngAltitude optionalמיקום המצלמה, שמוגדר כ-LatLngAltitude. אם לא מציינים את השדה, המערכת מסיקה את הערך שלו. אם משמיטים את
center אבל מציינים את cameraPosition, הערך של center יופק מ-cameraPosition.. אם שניהם מתעדכנים באותה לולאת הרצה, המערכת תעדיף את cameraPosition. השדות cameraPosition ו-center יכולים להיות נגזרים אחד מהשני ביחס של אחד לאחד בהקשר של הכיוון, הטווח, הגלגול וההטיה המשותפים שצוינו.מאפיין HTML: camera-position="lat,lng,altitude" |
center
attr: center |
סוג הקלט:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalסוג הפלט: LatLngAltitude optionalמרכז המפה, שמוצג כ-LatLngAltitude, כאשר הגובה הוא במטרים מעל גובה פני הים הממוצע. שימו לב שזה לא בהכרח המיקום של המצלמה, כי השדה
range משפיע על המרחק של המצלמה ממרכז המפה. אם לא מגדירים את המדיניות, ברירת המחדל היא {lat: 0, lng: 0, altitude: 63170000}. הגובה המקסימלי המותר הוא 63,170,000 מטרים (רדיוס כדור הארץ כפול 10).מאפיין HTML: center="lat,lng,altitude" |
defaultUIHidden
attr: default-ui-hidden |
סוג הקלט:
boolean optionalסוג הפלט: booleanברירת המחדל:
falseכשהערך הוא
true, כל לחצני ברירת המחדל של ממשק המשתמש מוסתרים.מאפיין HTML: default-ui-hidden |
description
attr: description |
סוג הקלט:
string optionalסוג הפלט: string optionalאם תספקו תיאור נגישות (למשל, לשימוש עם קוראי מסך), הוא יתווסף למפה עם הערך שסיפקתם.
מאפיין HTML: description="string" |
fov
attr: fov |
סוג הקלט:
number optionalסוג הפלט: number optionalמציין את שדה הראייה האנכי במעלות. הערכים התקינים נעים בין 5.0 ל-80.0. ערכים גבוהים יותר מגדילים את האזור הגלוי, אבל עלולים לגרום לעיוות בפרספקטיבה. ברירת המחדל: 35.0.
מאפיין HTML: fov="number" |
gestureHandling
attr: gesture-handling |
ברירת המחדל:
GestureHandling.GREEDYההגדרה הזו קובעת את הטיפול בתנועות משותפות. כשההגדרה היא
COOPERATIVE, צריך להשתמש במקשי צירוף או בתנועות בשתי אצבעות כדי לגלול במפה. כשהערך הוא GREEDY, אי אפשר לגלול את הדף המארח מאירועי משתמש ברכיב המפה. כשהמדיניות מוגדרת לערך AUTO, הטיפול בתנועה נקבע לפי יכולת הגלילה של דף המארח.מאפיין HTML: gesture-handling="value-name" |
heading
attr: heading |
סוג הקלט:
number optionalסוג הפלט: number optionalכיוון המצפן של המפה, במעלות, כאשר הצפון הוא אפס. כשאין הטיה, כל גלגול יתפרש ככיוון.
מאפיין HTML: heading="number" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
מוסיף מזהה שיוך שימוש למאתחל, שעוזר ל-Google להבין אילו ספריות ודוגמאות מועילות למפתחים, כמו שימוש בספריית מקבצי סמנים. כדי לבטל את ההסכמה לשליחת מזהה השיוך של השימוש, אפשר למחוק את המאפיין הזה. יישלחו רק ערכים ייחודיים. יכול להיות שהמערכת תתעלם משינויים בערך הזה אחרי יצירת המופע.
מאפיין HTML: internal-usage-attribution-ids="id1 id2" |
language |
סוג הקלט:
string optionalסוג הפלט: string optionalהשפה שבה המערכת תנסה להציג את המפה הבסיסית. כברירת מחדל, השפה תהיה השפה שהמפתח ביקש כשטען את Maps JavaScript API. |
mapId
attr: map-id |
סוג הקלט:
string optionalסוג הפלט: string optionalמציין מזהה מפה שישמש לאחזור סגנון מפה מבוסס-ענן בשביל המפה.
מאפיין HTML: map-id="string" |
maxAltitude
attr: max-altitude |
סוג הקלט:
number optionalסוג הפלט: number optionalהגובה המקסימלי מעל פני הקרקע שיוצג במפה. ערך תקין הוא בין
0 ל-63170000 מטרים (רדיוס כדור הארץ כפול 10).מאפיין HTML: max-altitude="number" |
maxHeading
attr: max-heading |
סוג הקלט:
number optionalסוג הפלט: number optionalהזווית המקסימלית של הכיוון (סיבוב) של המפה. ערך תקין הוא בין
0 ל-360 מעלות. minHeading ו-maxHeading מייצגים מרווח של פחות מ- מעלות או שווה ל-360 מעלות שבו תנועות הראש יאושרו. minHeading = 180 ו-maxHeading = 90 יאפשרו כיוון ב-[0, 90] וכיוון ב-[180, 360]. minHeading = 90 ו-maxHeading = 180 יאפשרו כותרת ב-[90, 180].מאפיין HTML: max-heading="number" |
maxTilt
attr: max-tilt |
סוג הקלט:
number optionalסוג הפלט: number optionalזווית הפגיעה המקסימלית של המפה. ערך תקין הוא בין
0 ל-90 מעלות.מאפיין HTML: max-tilt="number" |
minAltitude
attr: min-altitude |
סוג הקלט:
number optionalסוג הפלט: number optionalהגובה המינימלי מעל פני הקרקע שיוצג במפה. ערך תקין הוא בין
0 ל-63170000 מטרים (רדיוס כדור הארץ כפול 10).מאפיין HTML: min-altitude="number" |
minHeading
attr: min-heading |
סוג הקלט:
number optionalסוג הפלט: number optionalזווית הכיוון (הסיבוב) המינימלית של המפה. ערך תקין הוא בין
0 ל-360 מעלות. minHeading ו-maxHeading מייצגים מרווח של פחות מ- מעלות או שווה ל-360 מעלות שבו תנועות הראש יאושרו. minHeading = 180 ו-maxHeading = 90 יאפשרו כיוון ב-[0, 90] וכיוון ב-[180, 360]. minHeading = 90 ו-maxHeading = 180 יאפשרו כותרת ב-[90, 180].מאפיין HTML: min-heading="number" |
minTilt
attr: min-tilt |
סוג הקלט:
number optionalסוג הפלט: number optionalזווית הפגיעה המינימלית של המפה. ערך תקין הוא בין
0 ל-90 מעלות.מאפיין HTML: min-tilt="number" |
mode
attr: mode |
מציין את המצב שבו המפה תוצג. אם לא מגדירים את המאפיין, המפה לא תוצג.
מאפיין HTML: mode="value-name" |
range
attr: range |
סוג הקלט:
number optionalסוג הפלט: number optionalהמרחק מהמצלמה למרכז המפה, במטרים.
מאפיין HTML: range="number" |
region |
סוג הקלט:
string optionalסוג הפלט: string optionalהאזור שבו המערכת תנסה להציג את נקודות העניין במפה הבסיסית. כברירת מחדל, האזור יהיה זה שהמפתח ביקש כשטען את Maps JavaScript API. |
roll
attr: roll |
סוג הקלט:
number optionalסוג הפלט: number optionalהסיבוב של המצלמה סביב וקטור התצוגה במעלות. כדי לפתור אי-בהירויות, כשאין הטיה, כל גלגול יפורש ככיוון.
מאפיין HTML: roll="number" |
tilt
attr: tilt |
סוג הקלט:
number optionalסוג הפלט: number optionalההטיה של וקטור התצוגה של המצלמה במעלות. וקטור תצוגה שמביט ישירות למטה אל כדור הארץ יהיה עם הטיה של אפס מעלות. וקטור תצוגה שמצביע הרחק מכדור הארץ יהיה בעל הטיה של
180 מעלות.מאפיין HTML: tilt="number" |
attr: default-ui-disabled |
סוג:
boolean optionalברירת המחדל:
falseכשהמדיניות מוגדרת לערך
true, כל לחצני ברירת המחדל של ממשק המשתמש מושבתים. לא משבית את אמצעי הבקרה של המקלדת והתנועות.מאפיין HTML: default-ui-disabled |
Methods | |
|---|---|
flyCameraAround |
flyCameraAround(options)פרמטרים:
הערך המוחזר: אין
השיטה הזו מזיזה את המצלמה במסלול מעגלי סביב מיקום נתון למשך זמן נתון. אפשר לחזור על האנימציה FlyAroundAnimationOptions.repeatCount פעמים. המצלמה תזוז בכיוון השעון. המיקום שסביבו מתבצעת התנועה המעגלית מצוין באמצעות CameraOptions.center. זה המיקום שיוצג במרכז אזור התצוגה במהלך אנימציית הסיבוב, כשהמצלמה נעה סביבו. השיטה היא אסינכרונית כי אנימציות יכולות להתחיל רק אחרי שהמפה נטענה במידה מינימלית. השיטה מחזירה ערך אחרי שהאנימציה מתחילה. אם מספר הפעמים של FlyAroundAnimationOptions.repeatCount הוא אפס, לא יתרחש סיבוב והאנימציה תסתיים מיד אחרי שהיא תתחיל. |
flyCameraTo |
flyCameraTo(options)פרמטרים:
הערך המוחזר: אין
השיטה הזו מזיזה את המצלמה באופן פרבולי מהמיקום הנוכחי למיקום סופי נתון, במשך זמן נתון. אפשר לציין את מיקום הסיום באמצעות CameraOptions.cameraPosition, ששולט במיקום המדויק של המצלמה, או באמצעות CameraOptions.center, ששולט במרכז של אזור התצוגה הגלוי של המפה. השיטה היא אסינכרונית כי אנימציות יכולות להתחיל רק אחרי שהמפה נטענה במידה מינימלית. השיטה מחזירה ערך אחרי שהאנימציה מתחילה. |
stopCameraAnimation |
stopCameraAnimation()פרמטרים: אין
הערך המוחזר: אין
השיטה הזו עוצרת כל אנימציית מעוף שפועלת. המצלמה נשארת במיקום שבו היא נמצאת באמצע האנימציה, ולא עוברת לנקודת הסיום. השיטה היא אסינכרונית כי אנימציות יכולות להתחיל או להפסיק רק אחרי שהמפה נטענה במידה מסוימת. השיטה מחזירה את הערך אחרי שהאנימציה נעצרת. |
בירושה:
addEventListener,
removeEventListener
| |
אירועים | |
|---|---|
gmp-animationend |
function(animationEndEvent)ארגומנטים:
האירוע הזה מופעל כשאנימציית המעוף מסתיימת. האירוע הזה מבעבע דרך עץ ה-DOM. |
gmp-camerapositionchange |
function(cameraPositionChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמשתנה המאפיין cameraPosition של Map3DElement. |
gmp-centerchange |
function(centerChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין המרכז של Map3DElement משתנה. |
gmp-click |
function(clickEvent)ארגומנטים:
האירוע הזה מופעל כשלוחצים על הרכיב Map3DElement. |
gmp-error |
function(mapInitializationErrorEvent)ארגומנטים:
האירוע הזה מופעל כשהמפה לא מצליחה לבצע אתחול. |
gmp-fovchange |
function(fovChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין fov של Map3DElement משתנה. |
gmp-headingchange |
function(headingChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין הכיוון של Map3DElement משתנה. |
gmp-map-id-error |
function(mapIdErrorEvent)ארגומנטים:
האירוע הזה מופעל כשהמאפיין mapId של Map3DElement לא תקין. |
gmp-rangechange |
function(rangeChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין הטווח של Map3DElement משתנה. |
gmp-rollchange |
function(rollChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין הגלגול של Map3DElement משתנה. |
gmp-steadychange |
function(steadyChangeEvent)ארגומנטים:
האירוע הזה מופעל כשהמצב היציב של Map3DElement משתנה. |
gmp-tiltchange |
function(tiltChangeEvent)ארגומנטים:
האירוע הזה מופעל כשמאפיין ההטיה של Map3DElement משתנה. |
ממשק Map3DElementOptions
ממשק google.maps.maps3d.Map3DElementOptions
אובייקט Map3DElementOptions משמש להגדרת המאפיינים שאפשר להגדיר ב-Map3DElement.
מאפיינים | |
|---|---|
אופציונלי |
סוג:
AutofitsCameraAnimation optional |
bounds
אופציונלי |
סוג:
LatLngBounds|LatLngBoundsLiteral optional |
cameraPosition
אופציונלי |
סוג:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional |
center
אופציונלי |
סוג:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional |
אופציונלי |
סוג:
boolean optional |
defaultUIHidden
אופציונלי |
סוג:
boolean optional |
description
אופציונלי |
סוג:
string optional |
fov
אופציונלי |
סוג:
number optional |
gestureHandling
אופציונלי |
סוג:
GestureHandling optional |
heading
אופציונלי |
סוג:
number optional |
internalUsageAttributionIds
אופציונלי |
סוג:
Iterable<string> optional |
language
אופציונלי |
סוג:
string optional |
mapId
אופציונלי |
סוג:
string optional |
maxAltitude
אופציונלי |
סוג:
number optional |
maxHeading
אופציונלי |
סוג:
number optional |
maxTilt
אופציונלי |
סוג:
number optional |
minAltitude
אופציונלי |
סוג:
number optional |
minHeading
אופציונלי |
סוג:
number optional |
minTilt
אופציונלי |
סוג:
number optional |
mode
אופציונלי |
סוג:
MapMode optional |
range
אופציונלי |
סוג:
number optional |
region
אופציונלי |
סוג:
string optional |
roll
אופציונלי |
סוג:
number optional |
tilt
אופציונלי |
סוג:
number optional |
קבועים של MapMode
google.maps.maps3d.MapMode
קבועים
ספרייה "maps3d"
מציין את המצב שבו המפה תוצג.
אפשר להשתמש בקבועים האלה גם כמחרוזות. ב-TypeScript, המחרוזות המילוליות מוגדרות לפי הסוג MapModeString.
const {MapMode} = await google.maps.importLibrary("maps3d");
קבועים | |
|---|---|
HYBRID |
במצב המפה הזה מוצגת שכבה שקופה של רחובות ראשיים על גבי תמונות לוויין או תמונות פוטוריאליסטיות. |
|
במצב המפה הזה מוצגת מפת רחובות רגילה. |
SATELLITE |
במצב המפה הזה מוצגות תמונות לוויין או תמונות פוטו-ריאליסטיות, אם הן זמינות. |
קבועים של GestureHandling
google.maps.maps3d.GestureHandling
קבועים
ספרייה "maps3d"
מציין איך לטפל באירועי תנועה ברכיב המפה.
אפשר להשתמש בקבועים האלה גם כמחרוזות. ב-TypeScript, המחרוזות המילוליות מוגדרות לפי הסוג GestureHandlingString.
const {GestureHandling} = await google.maps.importLibrary("maps3d");
קבועים | |
|---|---|
AUTO |
כך המפה יכולה לבחור אם להשתמש בטיפול בתנועות מסוג cooperative או greedy. זוהי פעולת ברירת המחדל אם לא צוין אחרת. הפעולה הזו תגרום למפה להיכנס למצב שיתופי אם המפה שולטת בהורה הגלילה שלה (בדרך כלל הדף המארח) עד למצב שבו המשתמש לא יכול לגלול מהמפה לתוכן אחר. |
COOPERATIVE |
האפשרות הזו מאלצת מצב שיתופי, שבו נדרשים מקשי צירוף או תנועות בשתי אצבעות כדי לגלול במפה. |
GREEDY |
האפשרות הזו מאלצת מצב חמדני, שבו אי אפשר לגלול את הדף המארח מאירועי משתמש ברכיב המפה. |
AutofitsCameraAnimation constants
google.maps.maps3d.AutofitsCameraAnimation
קבועים
ספרייה "maps3d"
מציין איך המצלמה צריכה להתנהג כשהיא עוברת למיקום חדש כדי למרכז את עצמה בהתאם לרכיבי הצאצא שהצטרפו.
אפשר להשתמש בקבועים האלה גם כמחרוזות. ב-TypeScript, המחרוזות המילוליות מוגדרות לפי הסוג AutofitsCameraAnimationString.
const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
קבועים | |
|---|---|
FLY_TO |
התצוגה עוברת למיקום החדש. |
NONE |
התמונה עוברת למיקום החדש בלי אנימציה. |
ממשק FlyAroundAnimationOptions
ממשק google.maps.maps3d.FlyAroundAnimationOptions
אפשרויות התאמה אישית של האנימציה FlyCameraAround.
מאפיינים | |
|---|---|
camera |
סוג:
CameraOptionsהנקודה המרכזית שאליה המצלמה צריכה להסתכל במהלך אנימציית המסלול. שימו לב שהכיוון של המפה ישתנה כשהמצלמה תקיף את נקודת המרכז הזו. |
durationMillis
אופציונלי |
סוג:
number optionalמשך הזמן של מחזור אנימציה אחד באלפיות השנייה. |
repeatCount
אופציונלי |
סוג:
number optionalמציין את מספר הפעמים שהאנימציה תחזור על עצמה. אם המספר הוא אפס, האנימציה תסתיים מיד אחרי שהיא תתחיל. אם מעבירים את Number.Infinity, האנימציה תחזור על עצמה בלי סוף. |
אופציונלי |
סוג:
number optionalמספר הסיבובים סביב המרכז במשך הזמן הנתון. ההגדרה הזו קובעת את מהירות הסיבוב הכללית. אם תעבירו מספר שלילי לסיבובים, המצלמה תסתובב נגד כיוון השעון במקום בכיוון השעון שמוגדר כברירת מחדל. |
ממשק FlyToAnimationOptions
ממשק google.maps.maps3d.FlyToAnimationOptions
אפשרויות התאמה אישית של האנימציה FlyCameraTo.
מאפיינים | |
|---|---|
endCamera |
סוג:
CameraOptionsהמיקום שאליו המצלמה צריכה לפנות בסוף האנימציה. |
durationMillis
אופציונלי |
סוג:
number optionalמשך הזמן של האנימציה באלפיות השנייה. אם משך הזמן הוא 0, המצלמה תעבור ישירות למיקום הסופי. |
ממשק CameraOptions
ממשק google.maps.maps3d.CameraOptions
אובייקט CameraOptions משמש להגדרת המאפיינים שאפשר להגדיר באובייקט מצלמה. אובייקט המצלמה יכול להיות כל דבר שיש לו מיקום מצלמה, למשל מצב מפה נוכחי או מצב אנימציה עתידי מבוקש.
מאפיינים | |
|---|---|
altitudeMode
אופציונלי |
סוג:
AltitudeMode optionalברירת המחדל:
AltitudeMode.ABSOLUTEערך enum שמציין איך לפרש את ערך הגובה של אובייקט CameraOptions נתון. הפעולה הזו עושה שימוש חוזר בערך ה-enum הקיים AltitudeMode. |
cameraPosition
אופציונלי |
סוג:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional |
center
אופציונלי |
סוג:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional |
fov
אופציונלי |
סוג:
number optional |
heading
אופציונלי |
סוג:
number optional |
range
אופציונלי |
סוג:
number optional |
roll
אופציונלי |
סוג:
number optional |
tilt
אופציונלי |
סוג:
number optional |
המחלקה SteadyChangeEvent
google.maps.maps3d.SteadyChangeEvent
class
extends Event
library "maps3d"
האירוע הזה נוצר ממעקב אחר מצב יציב של Map3DElement. האירוע הזה מבעבע דרך עץ ה-DOM.
const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
מאפיינים | |
|---|---|
isSteady |
סוג:
booleanמציין אם Map3DElement יציב (כלומר, כל העיבוד של הסצנה הנוכחית הושלם) או לא. |
המחלקה LocationClickEvent
google.maps.maps3d.LocationClickEvent
class
extends Event
library "maps3d"
האירוע הזה נוצר בלחיצה על Map3DElement.
const {LocationClickEvent} = await google.maps.importLibrary("maps3d");
מאפיינים | |
|---|---|
position |
סוג:
LatLngAltitude optionalקו הרוחב, קו האורך והגובה שהיו מתחת לסמן כשהאירוע התרחש. חשוב לזכור שברמות פחות מפורטות, הנתונים שיוחזרו יהיו פחות מדויקים. בנוסף, אם לוחצים על פני המים ממיקום גבוה יותר של המצלמה, יכול להיות שיוצג גובה קרקעית הים. האירוע הזה מבעבע דרך עץ ה-DOM. |
המחלקה PlaceClickEvent
google.maps.maps3d.PlaceClickEvent
class
extends LocationClickEvent
library "maps3d"
האירוע הזה נוצר בלחיצה על סמל של מקום בMap3DElement. כדי למנוע את הצגת ברירת המחדל של החלון הקופץ, צריך להפעיל את ה-method preventDefault() באירוע הזה כדי למנוע את הטיפול בו על ידי Map3DElement.
const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");
מאפיינים | |
|---|---|
placeId |
סוג:
stringמזהה המקום של התכונה במפה. |
בירושה:
position
| |
Methods | |
|---|---|
fetchPlace |
fetchPlace()פרמטרים: אין
הפונקציה מאחזרת Place למזהה המקום הזה. באובייקט Place שנוצר, המאפיין id יאוכלס. אפשר לבקש שדות נוספים בהמשך דרך Place.fetchFields(), בכפוף להפעלה ולחיוב הרגילים של Places API. ה-promise נדחה אם הייתה שגיאה באחזור של Place. |