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