הטיה וסיבוב

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

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

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

אם הופעלו אינטראקציות של משתמשים עם הטיה וסיבוב (כותרת) ( באופן פרוגרמטי או במסוף 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 כדי לשנות את הכותרת באופן פרוגרמטי, הטיה, מרכז וזום. מידע נוסף

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

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

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