הטיה וסיבוב

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

רוצה לנסות את הדוגמה

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

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

  • באמצעות העכבר, לוחצים לחיצה ארוכה על מקש 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].