אמצעי בקרה

בחירת פלטפורמה: Android iOS JavaScript

סקירה כללית של אמצעי הבקרה

המפות שמוצגות באמצעות Maps JavaScript API מכילות רכיבי ממשק משתמש שמאפשרים למשתמשים לבצע פעולות במפה. הרכיבים האלה נקראים פקדים ותוכלו לכלול וריאציות שלהם תרגום מכונה. לחלופין, אפשר לא לעשות כלום ולתת לממשק API של JavaScript במפות Google לטפל בכל התנהגות הבקרה.

במפה הבאה מוצגת קבוצת אמצעי הבקרה שמוגדרת כברירת מחדל בממשק API של JavaScript במפות 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;
index.ts

הערה: חשוב לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js

הערה: קובץ ה-JavaScript נוצר מהקטע של TypeScript.

להצגת דוגמה

כדאי לנסות דוגמה

JSFiddle.net Google Cloud Shell

הוספת פקדים למפה

ייתכן שתרצו להתאים אישית את הממשק על ידי הסרה, הוספה או שינוי של ממשק המשתמש התנהגות או אמצעי בקרה כדי לוודא שעדכונים עתידיים לא ישנו זאת או התנהגות המשתמשים. אם רוצים להוסיף או לשנות רק התנהגות קיימת, צריך מוודאים שאמצעי הבקרה נוסף באופן מפורש לאפליקציה.

חלק מאמצעי הבקרה מופיעים במפה כברירת מחדל, ואילו אחרים לא מופיעים אלא אם מבקשים אותם באופן ספציפי. הוספה או הסרה של פקדים המפה מצוינת באובייקט MapOptions הבא שדות שהגדרת ל-true כדי שיהיו גלויים או מוגדרים false כדי להסתיר אותן:

{
  zoomControl: boolean,
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

כברירת מחדל, כל הפקדים נעלמים אם המפה קטנה מ-200x200 פיקסלים. אפשר לשנות את ההתנהגות הזו על ידי הגדרה מפורשת של הפקד גלוי. לדוגמה, הטבלה הבאה מראה אם פקד הזום גלויים או לא גלויים, בהתאם לגודל המפה ולהגדרה של השדה zoomControl:

גודל מפה	zoomControl	גלוי?
הכול	false	לא
הכול	true	כן
‎>= 200x200px	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;
index.ts

הערה: חשוב לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
index.js

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

כדאי לנסות דוגמה

JSFiddle.net Google Cloud Shell

אפשרויות שליטה

יש כמה אמצעי בקרה שניתן להגדיר, כך שתוכלו לשנות את ההתנהגות שלהם או את המראה שלהם. לדוגמה, אמצעי הבקרה של סוג המפה עשוי להופיע כסרגל אופקי או כתפריט נפתח.

כדי לשנות את אמצעי הבקרה האלה, משנים את השדות המתאימים של האפשרויות של אמצעי הבקרה באובייקט MapOptions בזמן יצירת המפה.

לדוגמה, אפשרויות לשינוי הפקד 'סוג מפה' מפורטות שדה mapTypeControlOptions. הלחצן לשינוי סוג המפה עשוי להופיע באחת מהאפשרויות הבאות של style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR מציג את מערך הפקדים כלחצנים בסרגל אופקי, כפי שהוא מוצג במפות Google.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU מציג שליטה בלחצן אחד, שמאפשרת לבחור את סוג המפה באמצעות תפריט נפתח תפריט
• google.maps.MapTypeControlStyle.DEFAULT מציג את התנהגות ברירת המחדל, שמשתנה בהתאם לגודל המסך ועשויה להשתנות בגרסאות עתידיות של ה-API.

שימו לב: אם משנים את אפשרויות הבקרה, צריך להפעיל את אמצעי הבקרה באופן מפורש על ידי הגדרת הערך המתאים של MapOptions לערך true. לדוגמה, כדי להגדיר לפקטור הבקרה Map Type את הסגנון 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;
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
index.js

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell

בדרך כלל מגדירים את אמצעי הבקרה בזמן יצירת המפה. אבל, לפעמים ניתן לשנות את האופן שבו הפקדים מוצגים באופן דינמי על ידי קריאה ל-method של setOptions() של Map, להעביר אליו אפשרויות בקרה חדשות.

שינוי אמצעי הבקרה

מציינים את הצגת אמצעי הבקרה כשיוצרים את המפה באמצעות שדות באובייקט MapOptions של המפה. האלה מסומנים למטה:

• zoomControl מפעיל/ה את כוונון מרחק התצוגה או משבית/ה אותו. כברירת מחדל, הפקד הזה גלוי ומופיע ליד הפינה הימנית התחתונה של המפה. השדה zoomControlOptions מציין גם את הערך של ZoomControlOptions שישמש לאמצעי הבקרה הזה.
• הפקודה cameraControl מפעילה או משביתה את פקדי המצלמה. אמצעי הבקרה הזה מוצג כברירת מחדל במפות באמצעות ערוץ בטא. השדה cameraControlOptions מציין גם את הערך של CameraControlOptions שישמש לאמצעי הבקרה הזה.
• mapTypeControl מפעיל/משביתים את אמצעי הבקרה 'סוג מפה' שמאפשרת למשתמש לעבור בין סוגי מפות (כגון מפה ולוויין). כברירת מחדל, הלחצן הזה גלוי ומופיע בפינה הימנית העליונה של המפה. השדה mapTypeControlOptions מציין גם את הערך MapTypeControlOptions שבהם צריך להשתמש באמצעי הבקרה הזה.
• streetViewControl מפעיל/ה את אטב-האיש, שמאפשר למשתמש להפעיל תמונה פנורמית של Street View. כברירת מחדל, הלחצן הזה גלוי ומופיע ליד הפינה השמאלית התחתונה של המפה. השדה streetViewControlOptions מציין גם את StreetViewControlOptions שישמש לאמצעי הבקרה הזה.
• rotateControl מאפשר/ה להשבית את הופעת הלחצן 'סיבוב', שמאפשר לשלוט בכיוון של תמונות בזווית של 45°. כברירת מחדל, נוכחות הלחצן נקבעת לפי נוכחות או היעדר תמונות מזווית של 45° לסוג המפה הנתון, במיקום ובמרחק התצוגה הנוכחיים. כדי לשנות את התנהגות הרכיב, אפשר להגדיר את הערך של rotateControlOptions במפה כך שיציין את הערך של RotateControlOptions שבו רוצים להשתמש. לא ניתן להציג את הרכיב האינטראקטיבי אם אין תמונות ב-45° זמינות.
• scaleControl מפעיל/ה את הלחצן Scale (קנה מידה) שמציג את קנה המידה של המפה. כברירת מחדל, אמצעי הבקרה הזה לא גלוי. כשהתכונה מופעלת, היא תמיד מופיעה בפינה השמאלית התחתונה של המפה. בנוסף, השדה 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;
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
index.js

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

כדאי לנסות דוגמה

JSFiddle.net Google Cloud Shell

אמצעי בקרה בהתאמה אישית

בנוסף לשינוי הסגנון והמיקום של בקרות ה-API הקיימות, יכול ליצור פקדים משלך לניהול האינטראקציה עם המשתמש. פרמטרים להשוואה הם ווידג'טים נייחים שצפים מעל מפה במיקומים מוחלטים, בניגוד לשכבות-על, שנעות עם המפה הבסיסית. סמל האפשרויות הנוספות באופן בסיסי, בקרה הוא רכיב <div> נמצא במיקום מוחלט במפה, מציג למשתמש ממשק משתמש מסוים, מטפל באינטראקציה עם המשתמש או עם המפה, בדרך כלל באמצעות אירוע המטפל.

כדי ליצור אמצעי בקרה בהתאמה אישית, נדרשים רק כמה כללים. עם זאת, ההנחיות הבאות יכולות לשמש כשיטות מומלצות:

• מגדירים את קוד ה-CSS המתאים לרכיבי הבקרה שרוצים להציג.
• טיפול באינטראקציה עם המשתמש או עם המפה באמצעות פונקציות טיפול באירועים (event handlers) לשינויים במאפייני המפה או לאירועי משתמשים (לדוגמה, אירועי '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 של אמצעי הבקרה לערך שלילי. אי אפשר להציב פקדים מותאמים אישית שמאלה מהלוגו או שמימין לזכויות היוצרים.

הקוד הבא יוצר פקד מותאם אישית חדש (ה-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;
index.ts

הערה: חשוב לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
index.js

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell

הוספת מצב לפקדים

אמצעי הבקרה יכולים גם לאחסן מצב. הדוגמה הבאה דומה לדוגמה הקודמת, אבל הלחצן 'הגדרת מיקום בית' מאפשר להגדיר מיקום בית חדש. כדי לעשות זאת, יוצרים מאפיין home_ בתוך אמצעי הבקרה כדי לאחסן את המצב הזה ולספק פונקציות קבלה (getter) והגדרה (setter) למצב הזה.

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;
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
index.js

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell