הטיה וסיבוב

בחירת פלטפורמה: 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>
    <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 callback 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=beta"
      defer
    ></script>
  </body>
</html>
index.html

ניסוי לדוגמה

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

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

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

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

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

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

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

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

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

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

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

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