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

דף זה תורגם על ידי Cloud Translation API.

הטיה וסיבוב

בחירת פלטפורמה: Android iOS JavaScript

לעיון בדוגמה

סקירה כללית

כדי להגדיר את ההטיה והסיבוב (כיוון) במפת הווקטורים, צריך לכלול את המאפיינים heading ו-tilt בזמן האיניציאליזציה של המפה, ולקרוא לשיטות setTilt ו-setHeading במפה. בדוגמה הבאה מתווספים למפה כמה לחצנים שמאפשרים לשנות באופן פרוגרמטי את השיפוע ואת הכיוון בצעדים של 20 מעלות.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell

שימוש בתנועות של העכבר והמקלדת

אם הפעלתם את האינטראקציות של המשתמש עם הטיה וסיבוב (כיוון), הם יוכלו לשנות את הטיה ואת הסיבוב באמצעות העכבר והמקלדת:

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

שינוי פרוגרמטיבי של הטיה וכיוון

משתמשים בשיטות setTilt() ו-setHeading() כדי לשנות באופן פרוגרמטי את השיפוע והכיוון במפה וקטורית. כיוון הוא הכיוון שאליו פונה המצלמה במעלות בכיוון השעון, החל מצפון. לכן, map.setHeading(90) יסובב את המפה כך שמזרח יהיה למעלה. זווית ההטיה נמדדת מהזניט, כך ש-map.setTilt(0) מביטה ישירות למטה, בעוד ש-map.setTilt(45) תגרום לתצוגה משופעלת.

התקשרו למספר setTilt() כדי להגדיר את זווית ההטיה של המפה. משתמשים ב-getTilt() כדי לקבל את ערך ההטיה הנוכחי.
התקשרו למספר setHeading() כדי להגדיר את הכיוון של המפה. משתמשים ב-getHeading() כדי לקבל את הערך הנוכחי של הכותרת.

כדי לשנות את מרכז המפה בלי לשנות את ההטיה והכיוון, משתמשים במקש map.setCenter() או map.panBy().

חשוב לזכור שטווח הזווית שאפשר להשתמש בו משתנה בהתאם לרמת הזום הנוכחית. ערכים מחוץ לטווח הזה יוצמדו לטווח המותר הנוכחי.

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

ההשפעה על שיטות אחרות

כשמפעילים הטיה או סיבוב במפה, ההתנהגות של שיטות אחרות של Maps JavaScript API מושפעת:

הפונקציה map.getBounds() תמיד מחזירה את תיבת הגבול הקטנה ביותר שכוללת את האזור הגלוי. כשמפעילים הטיה, יכול להיות שהגבולות שיוחזרו ייצגו אזור גדול יותר מהאזור הגלוי באזור התצוגה של המפה.
map.fitBounds() יתאפס את השיפוע והכיוון לאפס לפני ההתאמה למסגרת.
map.panToBounds() יאפס את ההטיה והכיוון לאפס לפני ההחלפה של גבולות התצוגה.
אפשר להזין ב-map.setTilt() כל ערך, אבל השיפוע המקסימלי מוגבל על סמך רמת הזום הנוכחית של המפה.
map.setHeading() מקבל כל ערך, ומשנה אותו כך שיתאים לטווח [0, 360].