סקירה כללית של אמצעי הבקרה
המפות שמוצגות דרך Maps JavaScript API מכילות ממשק משתמש כדי לאפשר למשתמש לבצע אינטראקציה עם המפה. הרכיבים האלה נקראים פקדים ותוכלו לכלול וריאציות שלהם תרגום מכונה. לחלופין, אפשר לא לעשות דבר ולאפשר JavaScript API של מפות Google מטפל בכל התנהגות הבקרה.
המפה הבאה מציגה את קבוצת ברירת המחדל של הפקדים שמוצגת על ידי JavaScript API של מפות Google:
בהמשך מופיעה רשימה של כל אמצעי הבקרה שבהם אפשר להשתמש במפות:
- בפקד מרחק התצוגה מוצג הסימן "+" וגם '-' לחצנים לשינוי רמת הזום של המפה. אמצעי הבקרה הזה מופיע כברירת מחדל ב בפינה הימנית התחתונה של המפה.
- בקרת סוג המפה זמינה בתפריט נפתח
או סגנון של סרגל לחצנים אופקי, כך שהמשתמש יכול לבחור את סוג המפה
(
ROADMAP,SATELLITE,HYBRID, אוTERRAIN). אמצעי הבקרה הזה מופיע כברירת מחדל בפינה הימנית העליונה בפינה במפה. - הפקד Street View מכיל סמל של אטב-איש שניתן לגרור אל המפה כדי להפעיל את Street View. אמצעי הבקרה הזה מופיעה כברירת מחדל ליד הפינה הימנית התחתונה של המפה.
- פקד הסיבוב מספק שילוב של אפשרויות הטיה וסיבוב של מפות שמכילות צילומים לא ישרים. הזה אמצעי הבקרה הזה מופיע כברירת מחדל ליד הפינה הימנית התחתונה של המפה. צפייה 45° לתמונות לקבלת מידע נוסף.
- פקד קנה המידה מציג רכיב של קנה המידה של המפה. אמצעי הבקרה הזה מושבת כברירת מחדל.
- בבקרה על מסך מלא יש אפשרות לפתוח המפה במצב מסך מלא. אמצעי הבקרה הזה מופעל כברירת מחדל במחשב, מכשירים ניידים. הערה: iOS לא תומך בתכונה 'מסך מלא'. לכן השליטה במסך מלא לא גלוי במכשירי iOS.
- פקד מקשי הקיצור מציג רשימה של מקשי קיצור לאינטראקציה עם המפה.
לא ניתן לגשת אל פקדי המפה האלה או לשנות אותם ישירות. במקום זאת,
לשנות את שדות MapOptions במפה שמשפיעים על הראות
והצגת הפקדים. ניתן להתאים את תצוגת הבקרה בזמן
ליצור את המפה שלך (עם MapOptions מתאים) או לשנות
במפה באופן דינמי באמצעות קריאה ל-setOptions() כדי לשנות את מיקום המפה
אפשרויות.
לא כל הפקדים האלה מופעלים כברירת מחדל. מידע נוסף על ממשק המשתמש שמוגדר כברירת מחדל (וכיצד לשנות התנהגות כזו), ראה ממשק המשתמש המוגדר כברירת מחדל למטה.
ממשק המשתמש שמוגדר כברירת מחדל
כברירת מחדל, כל הפקדים ייעלמו אם המפה קטנה מדי (200x200 פיקסלים). אפשר לשנות את ההתנהגות הזו על ידי הגדרה מפורשת של הפקד גלוי. ראה הוספת פקדים ל מפה
ההתנהגות והמראה של הפקדים זהים במכשירים ניידים במחשבים, למעט הפקדים במסך מלא (ראו אופן הפעולה שמתוארים ברשימת אמצעי הבקרה).
בנוסף, הטיפול באמצעות המקלדת פועל בכל המכשירים כברירת מחדל.
השבתה של ממשק המשתמש המוגדר כברירת מחדל
מומלץ להשבית לגמרי את לחצני ברירת המחדל של ממשק ה-API. כדי לעשות את זה,
להגדיר את מאפיין disableDefaultUI של המפה (בתוך
אובייקט MapOptions) אל true. הנכס הזה
משבית את כל לחצני הבקרה של ממשק המשתמש מה-API של JavaScript של מפות Google. הוא
עם זאת, לא משפיעה על התנועות בעכבר או על מקשי הקיצור שבבסיס
במפה שנשלטת על ידי gestureHandling וגם
keyboardShortcuts נכסים בהתאמה.
הקוד הבא משבית את הלחצנים של ממשק המשתמש:
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: -33, lng: 151 },
disableDefaultUI: true,
}
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -33, lng: 151 },
disableDefaultUI: true,
});
}
window.initMap = initMap;
כדאי לנסות דוגמה
הוספת פקדים למפה
ייתכן שתרצו להתאים אישית את הממשק על ידי הסרה, הוספה או שינוי של ממשק המשתמש התנהגות או אמצעי בקרה כדי לוודא שעדכונים עתידיים לא ישנו זאת או התנהגות המשתמשים. אם ברצונך להוסיף או לשנות רק התנהגות קיימת, עליך מוודאים שאמצעי הבקרה נוסף באופן מפורש לאפליקציה.
חלק מהפקדים מופיעים במפה כברירת מחדל, ואחרים לא יופיעו
אלא אם ביקשת אותם באופן ספציפי. הוספה או הסרה של פקדים
המפה מצוינת באובייקט MapOptions הבא
שדות שהגדרת ל-true כדי שיהיו גלויים או מוגדרים
false כדי להסתיר אותם:
{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}
כברירת מחדל, כל הפקדים ייעלמו אם המפה קטנה מ-200x200 פיקסלים.
אפשר לשנות את ההתנהגות הזו על ידי הגדרה מפורשת של הפקד
גלוי. לדוגמה, הטבלה הבאה מראה אם פקד הזום
גלויים או לא גלויים, בהתאם לגודל המפה ולהגדרה של
השדה zoomControl:
| גודל מפה | zoomControl |
גלוי? |
|---|---|---|
| הכול | false |
לא |
| הכול | true |
כן |
| >= 200x200 פיקסלים | undefined |
כן |
| < 200x200 פיקסלים | undefined |
לא |
בדוגמה הבאה מגדירים את המפה להסתרה של מרחק התצוגה הצג את הפקד 'קנה מידה'. לתשומת ליבכם, אנחנו לא מוסיפים להשבית את ממשק המשתמש שמוגדר כברירת מחדל, כך שהשינויים האלה הם תוספת לממשק המשתמש שמוגדר כברירת מחדל או התנהגות המשתמשים.
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: -33, lng: 151 },
zoomControl: false,
scaleControl: true,
}
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -33, lng: 151 },
zoomControl: false,
scaleControl: true,
});
}
window.initMap = initMap;
כדאי לנסות דוגמה
אפשרויות שליטה
מספר פקדים ניתנים להגדרה, ומאפשרים לשנות את ההתנהגות או לשנות את המראה שלהן. בקרת סוג המפה, עבור לדוגמה, יכול להופיע כעמודה אופקית או כתפריט נפתח.
כדי לשנות את הפקדים האלה משנים את האפשרויות המתאימות של אמצעי הבקרה
שדות בתוך האובייקט MapOptions בעת יצירת המפה.
לדוגמה, אפשרויות לשינוי הפקד 'סוג מפה' מפורטות
שדה mapTypeControlOptions. הפקד 'סוג מפה' עשוי להופיע ב
אחת מ-style האפשרויות הבאות:
google.maps.MapTypeControlStyle.HORIZONTAL_BARמציג מערך של פקדים כלחצנים בסרגל אופקי כפי שמוצג ב-Google מפות Google.google.maps.MapTypeControlStyle.DROPDOWN_MENUמציג בקרה על לחצן יחיד, שמאפשר לבחור את סוג המפה באמצעות תפריט נפתח תפריטgoogle.maps.MapTypeControlStyle.DEFAULTמציג התנהגות ברירת מחדל, שתלויה בגודל המסך ועשויה להשתנות בעתיד גרסאות של ה-API.
לתשומת ליבך, אם בכל זאת ברצונך לשנות אפשרויות בקרה, עליך להפעיל אותן באופן מפורש
וגם את הרכיב האינטראקטיבי, על ידי הגדרה של הערך המתאים של MapOptions
אל true. לדוגמה, כדי להגדיר פקד 'סוג מפה'
כדי להציג את הסגנון DROPDOWN_MENU, צריך להשתמש בקוד הבא בתוך
האובייקט MapOptions:
...
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
...
הדוגמה הבאה ממחישה איך לשנות את מיקום ברירת המחדל סגנון של אמצעי בקרה.
TypeScript
// You can set control options to change the default position or style of many
// of the map controls.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: -33, lng: 151 },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ["roadmap", "terrain"],
},
}
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -33, lng: 151 },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ["roadmap", "terrain"],
},
});
}
window.initMap = initMap;
כדאי לנסות דוגמה
הפקדים מוגדרים בדרך כלל בעת יצירת המפה. אבל, לפעמים
ניתן לשנות את האופן שבו הפקדים מוצגים באופן דינמי על ידי
קריאה ל-method של setOptions() של Map,
להעביר אליו אפשרויות בקרה חדשות.
שינוי פקדים
מציינים תצוגה של אמצעי בקרה כשיוצרים את המפה
דרך השדות בתוך אובייקט MapOptions של המפה. האלה
מסומנים למטה:
- התכונה
zoomControlמפעילה או משביתה את הפקד Zoom. כברירת מחדל, הפקד הזה גלוי ומופיע ליד הפינה הימנית התחתונה של המפה. השדהzoomControlOptionsמציין גם אתZoomControlOptionsלשימוש באמצעי הבקרה הזה. mapTypeControlמפעיל/משביתים את אמצעי הבקרה 'סוג מפה' שמאפשרת למשתמש לעבור בין סוגי מפות (כגון מפה ולוויין). כברירת מחדל, אמצעי הבקרה הזה גלוי ומופיע בפינה הימנית העליונה. בפינה במפה. השדהmapTypeControlOptionsמציין גם את הערךMapTypeControlOptionsשבהם ייעשה שימוש עבור אמצעי הבקרה הזה.streetViewControlמפעיל/משביתים את פקד האטב-איש שמאפשרת למשתמש להפעיל תמונת פנורמה של Street View. כברירת מחדל, אמצעי הבקרה הזה גלוי ומופיע ליד הפינה השמאלית התחתונה במפה. השדהstreetViewControlOptionsמציין גם את הערךStreetViewControlOptionsשבהם ייעשה שימוש עבור אמצעי הבקרה הזה.rotateControlמפעיל/משבית את המראה של כדי לשלוט בכיוון של תמונות ב-45°, צריך לסובב את הפקד. על ידי ברירת מחדל, נוכחות אמצעי הבקרה נקבעת על סמך נוכחות או היעדרות של 45° עבור סוג המפה הנתון בזום הנוכחי המיקום. אפשר לשנות את אופן הפעולה של אמצעי הבקרה על ידי הגדרת מאפייני המפהrotateControlOptionsכדי לציין אתRotateControlOptionsכדי להשתמש. אי אפשר להפוך את יופיע אם אין תמונות ב-45° זמינות כרגע.scaleControlמפעיל/משביתים את פקד המדידה, מספקת קנה מידה פשוט במפה. כברירת מחדל, אמצעי הבקרה הזה לא גלוי. מתי מופעלת, הוא יופיע תמיד בפינה הימנית התחתונה של המפה.scaleControlOptionsמציין גם את הערךScaleControlOptionsלשימוש באמצעי הבקרה הזה.- הרכיב
fullscreenControlמפעיל או משבית את אמצעי הבקרה שנפתח המפה במצב מסך מלא. אמצעי הבקרה הזה מופעל כברירת מחדל במחשבים ובמכשירי Android. כשהאפשרות מופעלת, הפקד מופיע ליד הפינה השמאלית העליונה של המפה.fullscreenControlOptionsמציין גם את הערךFullscreenControlOptionsלשימוש באמצעי הבקרה הזה.
שימו לב: אתם יכולים להגדיר אפשרויות לאמצעי הבקרה שאתם משביתים בהתחלה.
שליטה במיקום
רוב אפשרויות הבקרה מכילות מאפיין position
(מסוג ControlPosition) שמציין את המיקום במפה אל
להציב את אמצעי הבקרה. המיקום של הפקדים האלה אינו מוחלט. במקום זאת,
ה-API יפרוס את הפקדים בצורה חכמה על ידי העברתם
רכיבי מפה קיימים, או אמצעי בקרה אחרים, במסגרת אילוצים נתונים (כמו
גודל המפה).
הערה: אין אפשרות להבטיח ייתכן שפקדים לא יהיו חופפים בהינתן פריסות מורכבות, למרות שה-API לנסות לסדר אותם בצורה חכמה.
מיקומי הבקרה הבאים נתמכים:
TOP_CENTERמציין שצריך למקם את הרכיב האינטראקטיבי לאורך המרכז העליון של המפה.TOP_LEFTמציין שצריך למקם את הרכיב האינטראקטיבי החלק השמאלי העליון של המפה, עם כל אחד מרכיבי המשנה של הפקד "זורם" לכיוון המרכז העליון.TOP_RIGHTמציין שצריך למקם את הרכיב האינטראקטיבי בפינה הימנית העליונה של המפה, עם כל אחד מרכיבי המשנה של הפקד "זורם" לכיוון המרכז העליון.LEFT_TOPמציין שצריך למקם את הרכיב האינטראקטיבי בפינה השמאלית העליונה של המפה, אבל מתחת לרכיביTOP_LEFT.RIGHT_TOPמציין שצריך למקם את הרכיב האינטראקטיבי בפינה הימנית העליונה של המפה, אבל מתחת לכלTOP_RIGHTרכיבים.LEFT_CENTERמציין שצריך למקם את הרכיב האינטראקטיבי לאורך הצד השמאלי של המפה, במרכז ביןTOP_LEFTו-BOTTOM_LEFTמיקומים.RIGHT_CENTERמציין שצריך למקם את הרכיב האינטראקטיבי בצד ימין של המפה, במרכזTOP_RIGHTו-BOTTOM_RIGHTמיקומים.LEFT_BOTTOMמציין שצריך למקם את הרכיב האינטראקטיבי בפינה השמאלית התחתונה של המפה, אבל מעל כלBOTTOM_LEFTרכיבים.RIGHT_BOTTOMמציין שצריך למקם את הרכיב האינטראקטיבי בפינה הימנית התחתונה של המפה, אבל מעל כלBOTTOM_RIGHTרכיבים.BOTTOM_CENTERמציין שצריך למקם את הרכיב האינטראקטיבי לאורך המרכז התחתון של המפה.BOTTOM_LEFTמציין שצריך למקם את הרכיב האינטראקטיבי לאורך החלק השמאלי התחתון של המפה, עם כל רכיבי המשנה של "flowing" לכיוון המרכז התחתון.BOTTOM_RIGHTמציין שצריך למקם את הרכיב האינטראקטיבי לאורך החלק הימני התחתון של המפה, עם כל רכיבי המשנה של הרכיב "flowing" לכיוון המרכז התחתון.
חשוב לשים לב שמיקומים אלה עשויים לחפוף למיקומים של רכיבים בממשק המשתמש שאת המיקומים שלהם לא תוכל לשנות (כגון זכויות יוצרים והלוגו של Google). במקרים כאלה, הפקדים יעברו בהתאם ללוגיקה שצוינה כל מיקום ולהופיע קרוב ככל האפשר לייצוג שלו המיקום.
הדוגמה הבאה מציגה מפה פשוטה שכל הפקדים מופעלים בה, ב- מיקומים שונים.
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 12,
center: { lat: -28.643387, lng: 153.612224 },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
fullscreenControl: true,
}
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: -28.643387, lng: 153.612224 },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
fullscreenControl: true,
});
}
window.initMap = initMap;
כדאי לנסות דוגמה
אמצעי בקרה בהתאמה אישית
בנוסף לשינוי הסגנון והמיקום של בקרות ה-API הקיימות,
יכול ליצור פקדים משלך לניהול האינטראקציה עם המשתמש. פרמטרים להשוואה
הם ווידג'טים נייחים שצפים מעל מפה במיקומים מוחלטים,
בניגוד לשכבות-על, שנעות עם המפה הבסיסית. סמל האפשרויות הנוספות
באופן בסיסי, בקרה הוא רכיב <div>
נמצא במיקום מוחלט במפה, מציג למשתמש ממשק משתמש מסוים,
מטפל באינטראקציה עם המשתמש או עם המפה, בדרך כלל באמצעות אירוע
המטפל.
כדי ליצור פקד מותאם אישית משלכם, יש צורך בכמה כללים. אבל, אחת מהשיטות המומלצות הבאות היא:
- הגדרת CSS מתאים להצגה של רכיבי הבקרה.
- טיפול באינטראקציה עם המשתמש או עם המפה באמצעות גורמים מטפלים באירועים עבור
למפות שינויים בנכסים או אירועי משתמש (לדוגמה,
'click'אירועים). - צריך ליצור רכיב
<div>כדי להחזיק את הפקד ולהוסיף הרכיב הזה למאפייןcontrolsשלMap.
בהמשך נדון בכל אחד מהחששות האלה.
שרטוט פקדים מותאמים אישית
אתם קובעים איך לשרטט את השליטה. באופן כללי, מומלץ
למקם את כל מצגת הבקרה במקום אחד
<div> כדי שתהיה לך אפשרות לשנות את הפקד
יחידה אחת. אנחנו נשתמש בדפוס העיצוב הזה בדוגמאות הבאות.
כדי לעצב פקדים אטרקטיביים, נדרש ידע מסוים ב-CSS וב-DOM שלנו. הקוד הבא מציג פונקציה ליצירת רכיב של לחצן שמכוונים את המפה כדי להתמקד בשיקגו.
function createCenterControl(map) {
const controlButton = document.createElement("button");
// Set CSS for the control.
controlButton.style.backgroundColor = "#fff";
controlButton.style.border = "2px solid #fff";
controlButton.style.borderRadius = "3px";
controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
controlButton.style.color = "rgb(25,25,25)";
controlButton.style.cursor = "pointer";
controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
controlButton.style.fontSize = "16px";
controlButton.style.lineHeight = "38px";
controlButton.style.margin = "8px 0 22px";
controlButton.style.padding = "0 5px";
controlButton.style.textAlign = "center";
controlButton.textContent = "Center Map";
controlButton.title = "Click to recenter the map";
controlButton.type = "button";
// Setup the click event listeners: simply set the map to Chicago.
controlButton.addEventListener("click", () => {
map.setCenter(chicago);
});
return controlButton;
}
טיפול באירועים מאמצעי בקרה מותאמים אישית
כדי שפקד יהיה שימושי, הוא צריך לעשות משהו. אילו נתונים מתבססים על אמצעי הבקרה
תלוי בכם. אמצעי הבקרה עשוי להגיב לקלט של משתמשים, או שהוא עשוי להגיב
לשינויים במצב של Map.
כדי להגיב לקלט של משתמשים, צריך להשתמש ב-addEventListener(), שמטפל באירועי DOM נתמכים.
קטע הקוד הבא מוסיף listener ל-'click' של הדפדפן
אירוע. חשוב לשים לב שהאירוע הזה התקבל מה-DOM ולא מהמפה.
// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};
controlButton.addEventListener('click', () => {
map.setCenter(chicago);
});
הפיכת אמצעי בקרה מותאמים אישית לנגישים
כדי לוודא שהפקדים מקבלים אירועי מקלדת ומוצגים כמו שצריך בקוראי מסך:
- השתמשו תמיד ברכיבי HTML מותאמים ללחצנים, לרכיבי טופס ולתוויות. יש להשתמש רק ב-DIV רכיב כקונטיינר לשמירת פקדים מקוריים; אף פעם לא להפוך DIV ל-UI כממשק משתמש אינטראקטיבי לרכיב מסוים.
- אפשר להשתמש ברכיב
label, במאפייןtitleאו ברכיבaria-labelבמקרים הרלוונטיים, כדי לספק מידע על רכיב בממשק המשתמש.
מיקום פקדים מותאמים אישית
פקדים מותאמים אישית ממוקמים במפה על ידי הצבתם במיקומים המתאימים
מיקומים בתוך controls של האובייקט Map
לנכס. הנכס הזה מכיל מערך של
google.maps.ControlPosition שנ'. אתם מוסיפים פקד מותאם אישית
מפה על ידי הוספת Node (בדרך כלל <div>)
אל ControlPosition מתאים. (למידע נוסף על
מיקומים, ראו שליטה במיקום
above.)
כל ControlPosition שומר MVCArray
הפקדים שמוצגים במיקום הזה. כתוצאה מכך, כשנוספים פקדים או
מוסרים מהמיקום, ה-API יעדכן את אמצעי הבקרה בהתאם.
ה-API מציב את אמצעי הבקרה בכל מיקום לפי הסדר של
נכס index; פקדים עם אינדקס נמוך יותר ימוקמו ראשונים.
לדוגמה, שני פקדים מותאמים אישית במיקום BOTTOM_RIGHT
יהיו מסודרות לפי סדר האינדקסים, כאשר ערכי האינדקס נמוכים יותר
בעדיפות גבוהה. כברירת מחדל, כל הפקדים המותאמים אישית ממוקמים אחרי המיקום
כל פקדי ברירת המחדל של ה-API. כדי לשנות את שיטת הפעולה הזאת אפשר להגדיר
המאפיין index של Control יהיה ערך שלילי. אמצעי בקרה בהתאמה אישית
לא יכול להיות ממוקם משמאל ללוגו או מימין
זכויות יוצרים.
הקוד הבא יוצר פקד מותאם אישית חדש (ה-constructor שלו לא
מוצג) ומוסיף אותו למפה במיקום TOP_RIGHT.
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");
// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
דוגמה לבקרה מותאמת אישית
הבקרה הבאה היא פשוטה (אם כי לא מועילה במיוחד)
משלב את הדפוסים שמוצגים למעלה. אמצעי הבקרה הזה מגיב ל-DOM
'click' אירועים על ידי מרכוז המפה לפי ברירת מחדל מסוימת
location:
TypeScript
let map: google.maps.Map;
const chicago = { lat: 41.85, lng: -87.65 };
/**
* Creates a control that recenters the map on Chicago.
*/
function createCenterControl(map) {
const controlButton = document.createElement('button');
// Set CSS for the control.
controlButton.style.backgroundColor = '#fff';
controlButton.style.border = '2px solid #fff';
controlButton.style.borderRadius = '3px';
controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlButton.style.color = 'rgb(25,25,25)';
controlButton.style.cursor = 'pointer';
controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
controlButton.style.fontSize = '16px';
controlButton.style.lineHeight = '38px';
controlButton.style.margin = '8px 0 22px';
controlButton.style.padding = '0 5px';
controlButton.style.textAlign = 'center';
controlButton.textContent = 'Center Map';
controlButton.title = 'Click to recenter the map';
controlButton.type = 'button';
// Setup the click event listeners: simply set the map to Chicago.
controlButton.addEventListener('click', () => {
map.setCenter(chicago);
});
return controlButton;
}
function initMap() {
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
zoom: 12,
center: chicago,
});
// Create the DIV to hold the control.
const centerControlDiv = document.createElement('div');
// Create the control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let map;
const chicago = { lat: 41.85, lng: -87.65 };
/**
* Creates a control that recenters the map on Chicago.
*/
function createCenterControl(map) {
const controlButton = document.createElement("button");
// Set CSS for the control.
controlButton.style.backgroundColor = "#fff";
controlButton.style.border = "2px solid #fff";
controlButton.style.borderRadius = "3px";
controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
controlButton.style.color = "rgb(25,25,25)";
controlButton.style.cursor = "pointer";
controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
controlButton.style.fontSize = "16px";
controlButton.style.lineHeight = "38px";
controlButton.style.margin = "8px 0 22px";
controlButton.style.padding = "0 5px";
controlButton.style.textAlign = "center";
controlButton.textContent = "Center Map";
controlButton.title = "Click to recenter the map";
controlButton.type = "button";
// Setup the click event listeners: simply set the map to Chicago.
controlButton.addEventListener("click", () => {
map.setCenter(chicago);
});
return controlButton;
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: chicago,
});
// Create the DIV to hold the control.
const centerControlDiv = document.createElement("div");
// Create the control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
window.initMap = initMap;
כדאי לנסות דוגמה
הוספת מדינה לאמצעי בקרה
אמצעי בקרה עשויים גם לאחסן את המצבים. הדוגמה הבאה דומה
שמוצגת קודם, אבל הפקד מכיל ערך נוסף של 'הגדרת דף הבית' לחצן שמאפשר
מגדירה את אמצעי הבקרה להצגת מיקום הבית החדש. אנחנו עושים זאת על ידי יצירה של
נכס home_ בבקרה לאחסון המצב הזה וגם
מספקים מגדירים וקובעים למצב הזה.
TypeScript
let map: google.maps.Map;
const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };
/**
* The CenterControl adds a control to the map that recenters the map on
* Chicago.
*/
class CenterControl {
private map_: google.maps.Map;
private center_: google.maps.LatLng;
constructor(
controlDiv: HTMLElement,
map: google.maps.Map,
center: google.maps.LatLngLiteral
) {
this.map_ = map;
// Set the center property upon construction
this.center_ = new google.maps.LatLng(center);
controlDiv.style.clear = "both";
// Set CSS for the control border
const goCenterUI = document.createElement("button");
goCenterUI.id = "goCenterUI";
goCenterUI.title = "Click to recenter the map";
controlDiv.appendChild(goCenterUI);
// Set CSS for the control interior
const goCenterText = document.createElement("div");
goCenterText.id = "goCenterText";
goCenterText.innerHTML = "Center Map";
goCenterUI.appendChild(goCenterText);
// Set CSS for the setCenter control border
const setCenterUI = document.createElement("button");
setCenterUI.id = "setCenterUI";
setCenterUI.title = "Click to change the center of the map";
controlDiv.appendChild(setCenterUI);
// Set CSS for the control interior
const setCenterText = document.createElement("div");
setCenterText.id = "setCenterText";
setCenterText.innerHTML = "Set Center";
setCenterUI.appendChild(setCenterText);
// Set up the click event listener for 'Center Map': Set the center of
// the map
// to the current center of the control.
goCenterUI.addEventListener("click", () => {
const currentCenter = this.center_;
this.map_.setCenter(currentCenter);
});
// Set up the click event listener for 'Set Center': Set the center of
// the control to the current center of the map.
setCenterUI.addEventListener("click", () => {
const newCenter = this.map_.getCenter()!;
if (newCenter) {
this.center_ = newCenter;
}
});
}
}
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 12,
center: chicago,
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
const centerControlDiv = document.createElement("div");
const control = new CenterControl(centerControlDiv, map, chicago);
// @ts-ignore
centerControlDiv.index = 1;
centerControlDiv.style.paddingTop = "10px";
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let map;
const chicago = { lat: 41.85, lng: -87.65 };
/**
* The CenterControl adds a control to the map that recenters the map on
* Chicago.
*/
class CenterControl {
map_;
center_;
constructor(controlDiv, map, center) {
this.map_ = map;
// Set the center property upon construction
this.center_ = new google.maps.LatLng(center);
controlDiv.style.clear = "both";
// Set CSS for the control border
const goCenterUI = document.createElement("button");
goCenterUI.id = "goCenterUI";
goCenterUI.title = "Click to recenter the map";
controlDiv.appendChild(goCenterUI);
// Set CSS for the control interior
const goCenterText = document.createElement("div");
goCenterText.id = "goCenterText";
goCenterText.innerHTML = "Center Map";
goCenterUI.appendChild(goCenterText);
// Set CSS for the setCenter control border
const setCenterUI = document.createElement("button");
setCenterUI.id = "setCenterUI";
setCenterUI.title = "Click to change the center of the map";
controlDiv.appendChild(setCenterUI);
// Set CSS for the control interior
const setCenterText = document.createElement("div");
setCenterText.id = "setCenterText";
setCenterText.innerHTML = "Set Center";
setCenterUI.appendChild(setCenterText);
// Set up the click event listener for 'Center Map': Set the center of
// the map
// to the current center of the control.
goCenterUI.addEventListener("click", () => {
const currentCenter = this.center_;
this.map_.setCenter(currentCenter);
});
// Set up the click event listener for 'Set Center': Set the center of
// the control to the current center of the map.
setCenterUI.addEventListener("click", () => {
const newCenter = this.map_.getCenter();
if (newCenter) {
this.center_ = newCenter;
}
});
}
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: chicago,
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
const centerControlDiv = document.createElement("div");
const control = new CenterControl(centerControlDiv, map, chicago);
// @ts-ignore
centerControlDiv.index = 1;
centerControlDiv.style.paddingTop = "10px";
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
window.initMap = initMap;