Genel bakış
Haritayı başlatırken heading
ve tilt
özelliklerini ekleyerek ve harita üzerinde setTilt
ve setHeading
yöntemlerini çağırarak vektör haritasında yatırma ve döndürme (başlık) özelliğini ayarlayabilirsiniz. Aşağıdaki örnekte haritaya, yatırma ve yönü 20 derecelik artışlarla programlı bir şekilde 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> <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>
Örneği Deneyin
Fare ve klavye hareketlerini kullanma
Eğme ve döndürme (Yön) kullanıcı etkileşimleri etkinleştirildiyse (programlı olarak veya Google Cloud Console'da) kullanıcılar fare ve klavyeyi kullanarak yatırma ve döndürmeyi ayarlayabilir:
- Fareyi kullanarak ÜstKrktr tuşunu basılı tutun ve ardından eğmeyi ayarlamak için fareyi tıklayıp yukarı ve aşağı, başlığı ayarlamak için sağa ve sola sürükleyin.
- Klavyede ÜstKrktr tuşunu basılı tutun, ardından eğmeyi ayarlamak için yukarı ve aşağı ok tuşlarını, yönü ayarlamak için sağ ve sol ok tuşlarını kullanın.
Eğimi ve yönü programlı olarak ayarlama
Bir vektör haritasında eğimi ve yönü programlı 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. Bu nedenle map.setHeading(90)
, haritayı doğuya doğru bakacak şekilde döndürür. Eğme açısı tepe noktasından itibaren ölçülür. Bu nedenle map.setTilt(0)
dik bir şekilde aşağı bakarken map.setTilt(45)
eğik bir görünüm elde eder.
- Haritanın yatırma açısını ayarlamak için
setTilt()
numaralı telefonu arayın. Mevcut eğme değerini elde etmek içingetTilt()
kullanın. - Haritanın başlığını ayarlamak için
setHeading()
numaralı telefonu arayın. Mevcut 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()
özelliğini kullanın.
Kullanılabilen açı aralığının mevcut yakınlaştırma düzeyine göre değişeceğini unutmayın. Bu aralığın dışındaki değerler, geçerli olarak izin verilen aralığa ayarlanır.
Yön, yatırma, ortaya ve yakınlaştırmayı programlı bir şekilde değiştirmek için moveCamera
yöntemini de kullanabilirsiniz. Daha fazla bilgi
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, harita görüntü alanının görünür alanından daha geniş bir bölgeyi temsil edebilir.map.fitBounds()
, sınırları uymadan önce eğimi ve yönü sıfırlar.map.panToBounds()
, sınırları kaydırmadan önce eğimi ve yönü sıfırlayacak.map.setTilt()
her değeri kabul eder ancak maksimum yatırmayı geçerli harita yakınlaştırma düzeyine göre kısıtlar.map.setHeading()
, herhangi bir değeri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.