מפות וקטור

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

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

תחילת העבודה עם מפות וקטוריות

שליטה במצלמה

אפשר להשתמש בפונקציה map.moveCamera() כדי לעדכן כל שילוב של מאפייני המצלמה בבת אחת. map.moveCamera() מקבלת פרמטר יחיד שמכיל את כל מאפייני המצלמה שרוצים לעדכן. בדוגמה הבאה מוצגת קריאה ל-map.moveCamera() כדי להגדיר את center, zoom, heading ו-tilt בו-זמנית:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

כדי להוסיף אנימציה למאפייני המצלמה, קוראים לפונקציה map.moveCamera() עם לולאת אנימציה, כפי שמתואר כאן:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

זום חלקי

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

בדוגמה הבאה מופיעה הפעלה של זום חלקי במהלך האימות של המפה:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

אפשר גם להפעיל ולהשבית את הזום המפריד על ידי הגדרת האפשרות isFractionalZoomEnabled במפה, כפי שמתואר כאן:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

אפשר להגדיר מאזין כדי לזהות אם זום חלקי מופעל. האפשרות הזו שימושית במיוחד אם לא הגדרתם את isFractionalZoomEnabled באופן מפורש ל-true או ל-false. קוד הדוגמה הבא בודק אם זום חלקי מופעל:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});