מפות וקטור

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

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

המפה הווקטורית זהה למפה של 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});

אפשר להגדיר event listener כדי לזהות אם מופעל זום חלקי. זה שימושי במיוחד אם לא הגדרתם במפורש את 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');
  }
});