מפות וקטור

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

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