מפות וקטור

ב-JavaScript API של מפות Google יש שתי הטמעות שונות של המפה: רסטר ווקטור. המפה הווקטורית נטענת כברירת מחדל וטוענת את המפה כרשת של אריחי תמונות רשת מבוססי פיקסלים, שנוצרו על ידי צד השרת של הפלטפורמה של מפות Google ולאחר מכן מוצגים באפליקציית האינטרנט שלכם. מפת הווקטור מורכבת ממשבצות מבוססות וקטור, שנמשכות בזמן הטעינה בצד הלקוח באמצעות WebGL, טכנולוגיית אינטרנט שמאפשרת לדפדפן לגשת ל-GPU ול-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});

אפשר להגדיר את ה-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');
  }
});