Genel bakış
Haritayı başlatırken heading
ve tilt
özelliklerini dahil edip haritada setTilt
ve setHeading
yöntemlerini çağırarak vektör haritasında yatırma ve döndürme (yönlendirme) ayarlarını yapabilirsiniz. Aşağıdaki örnekte haritaya, yatırma ve yönü 20 derecelik artışlarla programatik olarak ayarlamayı gösteren bazı düğmeler eklenmiştir.
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
Eğme ve döndürme (başlık) kullanıcı etkileşimleri etkinleştirilmişse (programlı olarak veya Google Cloud Console'da) kullanıcılar, fare ve klavyeyi kullanarak yatırma ve döndürmeyi ayarlayabilir:
- Fareyi kullanarak üst karakter tuşunu basılı tutun, ardından yatırmayı ayarlamak için fareyi tıklayıp yukarı ve aşağı, yönü ayarlamak için de sağa ve sola sürükleyin.
- Klavyeyi kullanarak üst karakter tuşunu basılı tutun, ardından yatırmayı ayarlamak için yukarı ve aşağı ok tuşlarını, başlığı ayarlamak için sağ ve sol ok tuşlarını kullanın.
Yatırmayı ve yönü programatik olarak ayarlama
Vektör haritasında yatırma ve yönünüzü programatik olarak ayarlamak için setTilt()
ve setHeading()
yöntemlerini kullanın. Yön, kameranın kuzeyden başlayarak saat yönünde
baktığı yöndür. Dolayısıyla map.setHeading(90)
, haritayı
doğu yukarı bakacak şekilde döndürür. Eğme açısı zenitten ölçülür. Dolayısıyla map.setTilt(0)
düz aşağı bakarken map.setTilt(45)
, eğik bir görünüm sağlar.
- Haritayı yatırma açısını ayarlamak için
setTilt()
numaralı telefonu arayın. Mevcut eğim değerini öğrenmek içingetTilt()
kullanın. - Haritanın yönünü belirlemek için
setHeading()
numaralı telefonu arayın. Geçerli başlık değerini almak içingetHeading()
kullanın.
Yatırmayı ve yönü korurken harita merkezini değiştirmek için map.setCenter()
veya map.panBy()
kullanın.
Kullanılabilen açı aralığının, mevcut yakınlaştırma seviyesine göre değiştiğini unutmayın. Bu aralığın dışındaki değerler, şu anda izin verilen aralığa ayarlanır.
Başlığı, yatırmayı, ortalamayı ve yakınlaştırmayı programatik olarak değiştirmek için moveCamera
yöntemini de kullanabilirsiniz. Daha fazla bilgi edinin.
Diğer yöntemler üzerindeki etkisi
Haritaya yatırma veya döndürme uygulandığında, diğer Maps JavaScript API yöntemlerinin davranışı etkilenir:
map.getBounds()
her zaman, görünür bölgeyi içeren en küçük sınırlayıcı kutuyu döndürür. Eğme uygulandığında, döndürülen sınırlar, haritanın görüntü alanının görünür bölgesinden daha büyük bir bölgeyi temsil edebilir.map.fitBounds()
, sınırları aşmadan önce yatırmayı ve yönü sıfıra sıfırlar.map.panToBounds()
, sınırları kaydırmadan önce yatırmayı ve yönü sıfıra sıfırlar.map.setTilt()
tüm değerleri kabul eder ancak maksimum yatırmayı geçerli harita yakınlaştırma seviyesine göre kısıtlar.map.setHeading()
tüm değerleri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.