הטיה וסיבוב

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

לצפייה בדוגמה

סקירה

אפשר להגדיר הטיה וסיבוב (כותרת) במפה הווקטורית על ידי הכללת המאפיינים heading ו-tilt באתחול המפה, וקריאה ל-methods 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

כדאי לנסות דוגמה

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

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

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

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

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

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

כדי לשנות את מרכז המפה תוך שמירה על ההטיה והכותרת, אפשר להשתמש ב-map.setCenter() או ב-map.panBy().

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

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

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

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

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