הטיה וסיבוב

בחירת פלטפורמה: 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

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

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

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

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

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

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

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

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

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

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

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

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

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