Tổng quan
Bạn có thể đặt nghiêng và xoay (tiêu đề) trên bản đồ vectơ
bằng cách thêm các thuộc tính heading
và tilt
khi khởi tạo bản đồ và
bằng cách gọi phương thức setTilt
và setHeading
trên bản đồ. Nội dung sau đây
ví dụ này sẽ thêm một số nút vào bản đồ để hiển thị điều chỉnh độ nghiêng theo phương thức lập trình
và tiêu đề theo mức 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>
Dùng thử mẫu
Sử dụng cử chỉ chuột và bàn phím
Nếu các tương tác của người dùng về nghiêng và xoay (tiêu đề) đã được bật ( theo phương thức lập trình hoặc trong Google Cloud Console), thì người dùng có thể điều chỉnh độ nghiêng. và xoay bằng chuột và bàn phím:
- Sử dụng chuột, nhấn giữ phím shift rồi nhấp và kéo chuột lên và xuống để điều chỉnh độ nghiêng, phải và trái để điều chỉnh tiêu đề.
- Sử dụng bàn phím, nhấn giữ phím shift rồi dùng phím mũi tên lên và xuống các phím mũi tên để điều chỉnh độ nghiêng và các phím mũi tên phải và trái để điều chỉnh tiêu đề.
Điều chỉnh độ nghiêng và tiêu đề theo phương thức lập trình
Dùng phương thức setTilt()
và setHeading()
để điều chỉnh độ nghiêng theo phương thức lập trình
và hướng trên bản đồ vectơ. Hướng là hướng của máy ảnh
theo chiều kim đồng hồ bắt đầu từ hướng bắc, nên map.setHeading(90)
sẽ xoay bản đồ
sao cho hướng Đông hướng lên. Góc nghiêng được đo từ thiên đỉnh, do đó
map.setTilt(0)
đang nhìn thẳng xuống, còn kết quả là map.setTilt(45)
ở góc nhìn nghiêng.
- Gọi
setTilt()
để đặt góc nghiêng của bản đồ. Sử dụnggetTilt()
để lấy giá trị độ nghiêng hiện tại. - Gọi
setHeading()
để đặt tiêu đề của bản đồ. DùnggetHeading()
để có giá trị tiêu đề hiện tại.
Để thay đổi tâm bản đồ trong khi vẫn giữ nguyên độ nghiêng và hướng, hãy sử dụng
map.setCenter()
hoặc map.panBy()
.
Lưu ý rằng phạm vi các góc có thể sử dụng sẽ thay đổi theo mức thu phóng hiện tại cấp độ. Các giá trị nằm ngoài phạm vi này sẽ bị giới hạn trong phạm vi hiện cho phép dải ô.
Bạn cũng có thể sử dụng phương thức moveCamera
để thay đổi tiêu đề theo phương thức lập trình,
nghiêng, căn giữa và thu phóng. Tìm hiểu thêm.
Tác động đến các phương pháp khác
Khi tính năng nghiêng hoặc xoay được áp dụng cho bản đồ, hành vi của API Maps JavaScript khác bị ảnh hưởng:
map.getBounds()
luôn trả về hộp giới hạn nhỏ nhất chứa khu vực nhìn thấy; khi áp dụng nghiêng, giới hạn được trả về có thể biểu thị lớn hơn khu vực nhìn thấy của khung nhìn của bản đồ.map.fitBounds()
sẽ đặt lại độ nghiêng và hướng về 0 trước khi điều chỉnh ranh giới.map.panToBounds()
sẽ đặt lại độ nghiêng và hướng về 0 trước khi xoay ranh giới.map.setTilt()
chấp nhận mọi giá trị, nhưng hạn chế độ nghiêng tối đa dựa trên mức thu phóng bản đồ hiện tại.map.setHeading()
chấp nhận mọi giá trị và sẽ sửa đổi giá trị đó cho phù hợp với phạm vi [0, 360].