Genel Bakış
Vektör haritasında yatırma ve döndürme (yön) özelliklerini ayarlayabilirsiniz.
Haritayı başlatırken heading
ve tilt
özelliklerini dahil ederek ve
haritada setTilt
ve setHeading
yöntemlerini çağırarak. Aşağıdakiler
örnek, haritaya eğimi programatik olarak ayarlamayı gösteren bazı düğmeler ekler
20 derecelik artışlarla açın.
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>
Örneği Deneyin
Fare ve klavye hareketlerini kullanma
Yatırma ve döndürme (başlığı) kullanıcı etkileşimleri etkinleştirilmişse (veya manuel olarak veya Google Cloud Console üzerinden) analiz ettiğinizde, kullanıcılar ve döndürmeyi sağlar:
- Fareyi kullanarak, üst karakter tuşunu basılı tutun, ardından fareyi tıklayıp sürükleyin yönü ayarlamak için yukarı ve aşağı, sağa ve sola hareket ettirin.
- Klavyeyi kullanarak üst karakter tuşunu basılı tutun, ardından yukarı ve aşağı ok tuşlarını kullanın. Yatırmayı ayarlamak için ok tuşları, ayarlamak için sağ ve sol ok tuşları başlığı.
Yatırmayı ve yönü programatik olarak ayarlama
Eğimi programatik olarak ayarlamak için setTilt()
ve setHeading()
yöntemlerini kullanın
bir vektör haritasında yer alır. Yön, kameranın baktığı yöndür
kuzeyden başlayıp saat yönünde bir derece sağlayacak şekilde map.setHeading(90)
haritayı döndürecektir
olması gerekir. Eğme açısı zenitten ölçülür, dolayısıyla
map.setTilt(0)
düz aşağı bakarken map.setTilt(45)
ile sonuçlanacak
Eğik görünümde sunulur.
- Haritayı yatırma açısını ayarlamak için
setTilt()
numaralı telefonu arayın.getTilt()
hareketini kullanarak mevcut eğim değeri. - Haritanın yönünü belirlemek için
setHeading()
numaralı telefonu arayın. Şunları almak içingetHeading()
kullanın: <heading> değerini alır.
Yatırmayı ve yönü korurken harita merkezini değiştirmek için
map.setCenter()
veya map.panBy()
.
Kullanılabilen açı aralığının mevcut yakınlaştırmaya göre değişebileceğini unutmayın seviyesidir. Bu aralığın dışındaki değerler şu anda izin verilen değere ayarlanır aralığı.
Başlığı programatik olarak değiştirmek için moveCamera
yöntemini de kullanabilirsiniz.
yakınlaştırın, uzaklaştırın ve uzaklaştırın. Daha fazla bilgi edinin.
Diğer yöntemler üzerindeki etkisi
Haritaya yatırma veya döndürme uygulandığında, diğer Maps JavaScript API'nin davranışı nasıl etkilediğini öğrenin:
map.getBounds()
, her zaman görünür bölge; yatırma uygulandığında, döndürülen sınırlar bir görüntü alanının görünür bölgesinden daha büyük bir bölge.map.fitBounds()
, yatırmadan önce yatırmayı ve yön yönünü sıfıra sıfırlar. sınırlar.map.panToBounds()
, yatay kaydırmadan önce yatırmayı ve yönü sıfıra sıfırlar sınırlar.map.setTilt()
tüm değerleri kabul eder ancak mevcut harita yakınlaştırma düzeyine gidin.map.setHeading()
tüm değerleri kabul eder ve [0, 360] değerlerinden birini seçin.