מפות וקטור

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

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

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

שליטה במצלמה

אפשר להשתמש בפונקציה 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');
  }
});