Kontrollere Genel Bakış
Maps JavaScript API üzerinden görüntülenen haritalar, kullanıcıların haritayla etkileşimine olanak tanıyan kullanıcı arayüzü öğeleri içerir. Bu öğeler kontroller olarak bilinir ve uygulamanıza bu kontrollerin varyasyonlarını ekleyebilirsiniz. Alternatif olarak, hiçbir şey yapmadan Maps JavaScript API'nin tüm kontrol davranışlarını yönetmesine izin verebilirsiniz.
Aşağıdaki haritada, Maps JavaScript API tarafından görüntülenen varsayılan kontrol grupları gösterilmektedir:
Aşağıda, haritalarınızda kullanabileceğiniz denetimlerin tam listesi verilmiştir:
- Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için "+" ve "-" düğmelerini görüntüler. Bu denetim varsayılan olarak haritanın sağ alt köşesinde görünür.
- Harita Türü denetimi, kullanıcının bir harita türü (
ROADMAP
,SATELLITE
,HYBRID
veyaTERRAIN
) seçmesine olanak tanıyan, açılır veya yatay düğme çubuğu stilinde kullanılabilir. Bu denetim varsayılan olarak haritanın sol üst köşesinde görünür. - Street View denetimi üzerinde bir Pegman simgesi bulunur. Bu simge, Street View'ı etkinleştirmek için haritaya sürüklenebilir. Bu denetim, varsayılan olarak haritanın sağ alt kısmına yakın bir yerde görünür.
- Döndürme kontrolü, eğik görüntüler içeren haritalar için yatırma ve döndürme seçeneklerinin bir kombinasyonunu sunar. Bu denetim, varsayılan olarak haritanın sağ alt kısmına yakın bir yerde görünür. Daha fazla bilgi için 45° görüntülere bakın.
- Ölçek kontrolü, bir harita ölçeği öğesi görüntüler. Bu denetim varsayılan olarak devre dışıdır.
- Tam ekran denetimi, haritayı tam ekran modunda açma seçeneği sunar. Bu denetim, masaüstü ve mobil cihazlarda varsayılan olarak etkindir. Not: iOS tam ekran özelliğini desteklemez. Bu nedenle tam ekran kontrolü iOS cihazlarda görünmez.
- Klavye kısayolları denetimi, haritayla etkileşimde bulunmaya yönelik klavye kısayollarının listesini görüntüler.
Bu harita denetimlerine doğrudan erişemez veya bu denetimleri değiştiremezsiniz. Bunun yerine, kontrollerin görünürlüğünü ve sunumunu etkileyen MapOptions
alanlarını değiştirirsiniz. Haritanızda örnek oluşturduktan sonra kontrol sunumunu ayarlayabilir (uygun MapOptions
ile) veya harita seçeneklerini değiştirmek için setOptions()
yöntemini çağırarak haritayı dinamik olarak değiştirebilirsiniz.
Bu kontrollerin tümü varsayılan olarak etkin değildir. Varsayılan kullanıcı arayüzü davranışı (ve bu davranışın nasıl değiştirileceği) hakkında bilgi edinmek için aşağıdaki Varsayılan kullanıcı arayüzü'ne bakın.
Varsayılan Kullanıcı Arayüzü
Harita çok küçükse (200x200 piksel) varsayılan olarak tüm denetimler kaybolur. Kontrolü görünür olacak şekilde açıkça ayarlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya Denetim Ekleme konusuna bakın.
Kontrollerin davranışı ve görünümü, tam ekran kontrolü dışında mobil ve masaüstü cihazlarda aynıdır (kontrol listesinde açıklanan davranışa bakın).
Ayrıca, klavye kullanımı tüm cihazlarda varsayılan olarak açıktır.
Varsayılan kullanıcı arayüzünü devre dışı bırakma
API'nın varsayılan kullanıcı arayüzü düğmelerini tamamen kapatabilirsiniz. Bunu yapmak için haritanın disableDefaultUI
özelliğini (MapOptions
nesnesinin içinde) true
olarak ayarlayın. Bu mülk, Maps JavaScript API'deki tüm kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Bununla birlikte, temel haritada sırasıyla gestureHandling
ve keyboardShortcuts
özellikleri tarafından kontrol edilen fare hareketlerini veya klavye kısayollarını etkilemez.
Aşağıdaki kod, kullanıcı arayüzü düğmelerini devre dışı bırakır:
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
Örneği Deneyin
Haritaya Denetimler Ekleme
Kullanıcı arayüzü davranışı veya denetimlerini kaldırarak, ekleyerek veya değiştirerek arayüzünüzü uyarlayabilir ve gelecekteki güncellemelerin bu davranışı değiştirmediğinden emin olabilirsiniz. Yalnızca mevcut davranışı eklemek veya değiştirmek istiyorsanız denetimin uygulamanıza açıkça eklendiğinden emin olmanız gerekir.
Bazı kontroller haritada varsayılan olarak görünürken bazıları özellikle istemediğiniz sürece görünmez. Haritada kontrol ekleme veya kaldırma işlemleri, aşağıdaki MapOptions
nesnesinin alanlarında belirtilmiştir. Bu alanları, görünür yapmak için true
veya gizlemek için false
olarak ayarladınız:
{ zoomControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, rotateControl: boolean, fullscreenControl: boolean }
Harita 200x200 pikselden küçükse varsayılan olarak tüm denetimler kaybolur.
Kontrolü görünür olacak şekilde açıkça ayarlayarak bu davranışı geçersiz kılabilirsiniz. Örneğin, aşağıdaki tabloda, harita boyutuna ve zoomControl
alanının ayarına bağlı olarak yakınlaştırma kontrolünün görünür olup olmadığı gösterilmektedir:
Harita boyutu | zoomControl |
Görünür mü? |
---|---|---|
Hepsi | false |
Hayır |
Hepsi | true |
Evet |
>= 200x200 piksel | undefined |
Evet |
< 200x200 piksel | undefined |
Hayır |
Aşağıdaki örnekte, harita yakınlaştırma denetimini gizleyecek ve Ölçek denetimini görüntüleyecek şekilde ayarlanmaktadır. Varsayılan kullanıcı arayüzünü açıkça devre dışı bırakmadığımızı, bu nedenle bu değişikliklerin, varsayılan kullanıcı arayüzü davranışına ek olduğunu unutmayın.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, }); } window.initMap = initMap;
Örneği Deneyin
Denetim Seçenekleri
Yapılandırılabilir denetimler sayesinde davranışlarını veya görünümlerini değiştirebilirsiniz. Örneğin, Harita Türü denetimi yatay bir çubuk veya açılır menü olarak görünebilir.
Bu denetimler, haritanın oluşturulmasından sonra MapOptions
nesnesindeki uygun kontrol seçenekleri alanları değiştirilerek değiştirilir.
Örneğin, Harita Türü kontrolünü değiştirme seçenekleri mapTypeControlOptions
alanında belirtilmiştir. Harita Türü denetimi aşağıdaki style
seçeneklerden birinde görünebilir:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
, kontrol dizisini Google Haritalar'da gösterildiği gibi yatay bir çubukta düğme olarak gösterir.google.maps.MapTypeControlStyle.DROPDOWN_MENU
, harita türünü açılır menü üzerinden seçmenize olanak tanıyan tek düğmeli bir kontrol görüntüler.google.maps.MapTypeControlStyle.DEFAULT
, ekran boyutuna bağlı olan ve API'nin gelecekteki sürümlerinde değişebilecek varsayılan davranışı gösterir.
Herhangi bir kontrol seçeneğini değiştirirseniz uygun MapOptions
değerini true
olarak ayarlayarak kontrolü de açıkça etkinleştirmeniz gerektiğini unutmayın. Örneğin, DROPDOWN_MENU
stilini gösterecek bir Harita Türü kontrolü ayarlamak için MapOptions
nesnesinin içinde aşağıdaki kodu kullanın:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
Aşağıdaki örnekte, kontrollerin varsayılan konumunun ve stilinin nasıl değiştirileceği gösterilmektedir.
TypeScript
// You can set control options to change the default position or style of many // of the map controls. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// You can set control options to change the default position or style of many // of the map controls. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, }); } window.initMap = initMap;
Örneği Deneyin
Denetimler genellikle harita oluşturulduktan sonra yapılandırılır. Ancak Map
API'sinin setOptions()
yöntemini çağırarak ve yeni denetim seçenekleri ileterek kontrollerin sunumunu dinamik olarak değiştirebilirsiniz.
Denetimleri Değiştirme
Haritanızı, haritanın MapOptions
nesnesindeki alanlar aracılığıyla oluştururken bir kontrolün sunumunu belirtirsiniz. Bu alanlar aşağıda belirtilmiştir:
zoomControl
, yakınlaştırma denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim görünür ve haritanın sağ alt kısmına yakın bir yerde görünür.zoomControlOptions
alanı, bu kontrol için kullanılacakZoomControlOptions
bilgisini de belirtir.mapTypeControl
, kullanıcının harita türleri (Harita ve Uydu gibi) arasında geçiş yapmasına olanak tanıyan Harita Türü denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim görünür ve haritanın sol üst köşesinde görünür.mapTypeControlOptions
alanı, bu kontrol için kullanılacakMapTypeControlOptions
bilgisini de belirtir.streetViewControl
, kullanıcının Street View panoramasını etkinleştirmesine olanak tanıyan Pegman kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim görünür ve haritanın sağ alt kısmına yakın bir yerde görünür.streetViewControlOptions
alanı, bu kontrol için kullanılacakStreetViewControlOptions
bilgisini de belirtir.rotateControl
, 45° görüntülerin yönünü kontrol eden Döndürme kontrolünün görünümünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün varlığı geçerli yakınlaştırma ve konumdaki belirli bir harita türü için 45° görüntülerin olup olmamasına göre belirlenir. KullanılacakRotateControlOptions
öğesini belirtmek için haritanınrotateControlOptions
değerini ayarlayarak kontrolün davranışını değiştirebilirsiniz. Şu anda 45° görüntü yoksa kontrolün görünmesini sağlayamazsınız.scaleControl
, basit bir harita ölçeği sağlayan Ölçek denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim görünmez. Bu özellik etkinleştirildiğinde her zaman haritanın sağ alt köşesinde görünür.scaleControlOptions
ayrıca bu kontrol için kullanılacakScaleControlOptions
belirtir.fullscreenControl
, haritayı tam ekran modunda açan denetimi etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim masaüstü ve Android cihazlarda varsayılan olarak etkindir. Etkinleştirildiğinde, kontrol haritanın sağ üst kısmında görünür.fullscreenControlOptions
ayrıca bu kontrol için kullanılacakFullscreenControlOptions
belirtir.
Başlangıçta devre dışı bıraktığınız denetimler için seçenekler belirtebileceğinizi unutmayın.
Konumlandırmayı Kontrol Etme
Denetim seçeneklerinin çoğu, kontrolün harita üzerinde nereye yerleştirileceğini belirten bir position
özelliği (ControlPosition
türünde) içerir. Bu denetimlerin konumu mutlak değildir. Bunun yerine API, kontrolleri mevcut harita öğelerinin veya diğer kontrollerin etrafında, verilen kısıtlamalar (ör. harita boyutu) doğrultusunda akıllıca düzenler.
Not: API, karmaşık düzenler göz önüne alındığında kontrollerin çakışmayacağına dair herhangi bir garanti verilemez ancak API bunları akıllı bir şekilde düzenlemeye çalışır.
Aşağıdaki kontrol konumları desteklenir:
TOP_CENTER
, denetimin haritanın üst merkezi boyunca yerleştirilmesi gerektiğini belirtir.TOP_LEFT
, denetimin haritanın sol üst kısmı boyunca yerleştirilmesi gerektiğini ve kontrolün alt öğeleri üst merkeze doğru "akan" olduğunu belirtir.TOP_RIGHT
, denetimin haritanın sağ üst kısmı boyunca, denetimin alt öğeleri üst merkeze doğru "akan" olacak şekilde yerleştirilmesi gerektiğini belirtir.LEFT_TOP
, denetimin haritanın sol üst kısmı boyunca, ancak tümTOP_LEFT
öğelerinin altına yerleştirilmesi gerektiğini belirtir.RIGHT_TOP
, denetimin haritanın sağ üst kısmı boyunca ancak tümTOP_RIGHT
öğelerinin altına yerleştirilmesi gerektiğini belirtir.LEFT_CENTER
, denetiminTOP_LEFT
ileBOTTOM_LEFT
konumları arasında ortalanmış olarak haritanın sol tarafına yerleştirilmesi gerektiğini belirtir.RIGHT_CENTER
, denetiminTOP_RIGHT
veBOTTOM_RIGHT
konumları arasında ortalanmış olarak haritanın sağ tarafına yerleştirilmesi gerektiğini belirtir.LEFT_BOTTOM
, kontrolün haritanın sol alt kısmına yerleştirilmesi gerektiğini, ancak tümBOTTOM_LEFT
öğelerinin yukarısına yerleştirilmesi gerektiğini belirtir.RIGHT_BOTTOM
, kontrolün haritanın sağ alt kısmına yerleştirilmesi gerektiğini, ancak tümBOTTOM_RIGHT
öğelerinin yukarısına yerleştirilmesi gerektiğini belirtir.BOTTOM_CENTER
, denetimin haritanın alt merkezi boyunca yerleştirilmesi gerektiğini belirtir.BOTTOM_LEFT
kontrolün, denetimin alt öğeleri alt merkeze doğru "akan" olacak şekilde, haritanın sol alt kısmına yerleştirilmesi gerektiğini belirtir.BOTTOM_RIGHT
kontrolün, denetimin alt öğeleri alt merkeze doğru "akan" olacak şekilde, haritanın sağ alt kısmına yerleştirilmesi gerektiğini belirtir.
Bu konumların, yerleşimlerini değiştiremeyeceğiniz kullanıcı arayüzü öğelerinin konumlarıyla örtüşebileceğini unutmayın (telif hakları ve Google logosu gibi). Böyle durumlarda kontroller her konum için belirtilen mantığa göre ilerler ve belirtilen konumlarına mümkün olduğunca yakın görünür.
Aşağıdaki örnekte tüm kontrollerin farklı konumlarda etkin olduğu basit bir harita gösterilmektedir.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, }); } window.initMap = initMap;
Örneği Deneyin
Özel Denetimler
Mevcut API denetimlerinin stilini ve konumunu değiştirmenin yanı sıra kullanıcıyla etkileşimi gerçekleştirmek için kendi kontrollerinizi oluşturabilirsiniz. Kontroller, alttaki haritayla birlikte hareket eden yer paylaşımlı yolların aksine, haritanın üzerinde mutlak konumlarda yüzen sabit widget'lardır. Temel olarak kontrol, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzleri görüntüleyen ve genellikle bir etkinlik işleyici üzerinden kullanıcı veya harita ile etkileşimi işleyen bir <div>
öğesidir.
Kendi özel denetimlerinizi oluşturmak için birkaç kural gereklidir. Ancak, aşağıdaki yönergeler en iyi uygulama olabilir:
- Gösterilecek kontrol öğelerinin uygun CSS'sini tanımlayın.
- Harita özelliği değişiklikleri veya kullanıcı etkinlikleri (örneğin,
'click'
etkinlikleri) için etkinlik işleyiciler aracılığıyla kullanıcı veya haritayla etkileşimi işleyin. - Kontrolü tutmak için bir
<div>
öğesi oluşturun ve bu öğeyiMap
controls
özelliğine ekleyin.
Bu endişelerin her biri aşağıda ele alınmaktadır.
Özel Denetimler Çizme
Kontrolünüzü nasıl çizeceğinize siz karar verirsiniz. Genel olarak, kontrol sunumunuzu tek bir birim olarak değiştirebilmek için tüm kontrol sunumunuzu tek bir <div>
öğesine yerleştirmenizi öneririz. Bu tasarım kalıbını aşağıda gösterilen örneklerde kullanacağız.
İlgi çekici kontroller tasarlamak için CSS ve DOM yapısı hakkında biraz bilgi gerekir. Aşağıdaki kodda, haritayı Chicago'ya göre ortalayacak şekilde kaydıran bir düğme öğesi oluşturmaya yarayan bir işlev gösterilmektedir.
function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; }
Özel Kontrollerden Gelen Etkinlikleri İşleme
Bir kontrolün yararlı olması için, gerçekte bir şey yapması gerekir. Kontrolün ne yapacağı size bağlıdır. Kontrol, kullanıcı girişine veya Map
durumundaki değişikliklere yanıt verebilir.
Kullanıcı girişine yanıt vermek için, desteklenen DOM etkinliklerini işleyen addEventListener()
kullanın. Aşağıdaki kod snippet'i, tarayıcının 'click'
etkinliği için bir işleyici ekler. Bu etkinliğin haritadan değil, DOM'dan alındığını unutmayın.
// Setup the click event listener: set the map to center on Chicago var chicago = {lat: 41.850, lng: -87.650}; controlButton.addEventListener('click', () => { map.setCenter(chicago); });
Özel Denetimleri Erişilebilir Hale Getirme
Denetimlerin klavye etkinliklerini aldığından ve ekran okuyuculara doğru şekilde göründüğünden emin olmak için:
- Düğmeler, form öğeleri ve etiketler için her zaman yerel HTML öğeleri kullanın. Yerel kontrolleri barındırmak için yalnızca kapsayıcı olarak bir DIV öğesi kullanın; bir DIV öğesini hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak başka bir amaçla kullanmayın.
- Bir kullanıcı arayüzü öğesi hakkında bilgi sağlamak için uygun olduğunda
label
öğesini,title
özelliğini veyaaria-label
özelliğini kullanın.
Özel Denetimleri Konumlandırma
Özel denetimler, Map
nesnesinin controls
mülkü içinde uygun konumlara yerleştirilerek harita üzerinde konumlandırılır. Bu özellik, google.maps.ControlPosition
dizisi içeriyor. Node
(genellikle <div>
) öğesini uygun bir ControlPosition
öğesine ekleyerek haritaya özel bir denetim ekleyebilirsiniz. (Bu konumlar hakkında bilgi için yukarıdaki Konumlandırmayı Kontrol Etme bölümüne bakın.)
Her ControlPosition
, bu konumda görüntülenen kontrollerin bir MVCArray
kadarını depolar. Sonuç olarak, konuma kontroller eklendiğinde veya konumdan kaldırıldığında API kontrolleri uygun şekilde günceller.
API, kontrolleri her bir konuma bir index
özelliği sırasına göre yerleştirir; daha düşük dizine sahip kontroller ilk sıraya yerleştirilir.
Örneğin, BOTTOM_RIGHT
konumunda iki özel kontrol bu dizin sırasına göre düzenlenecek ve alt dizin değerleri öncelikli olacaktır. Varsayılan olarak tüm özel kontroller, herhangi bir API varsayılan denetimi yerleştirildikten sonra yerleştirilir. Bir kontrolün index
özelliğini negatif değer olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Özel kontroller logonun soluna veya telif haklarının sağına yerleştirilemez.
Aşağıdaki kod, yeni bir özel denetim oluşturur (oluşturucu gösterilmez) ve bu denetimi haritaya TOP_RIGHT
konumundaki ekler.
var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create a DIV to attach the control UI to the Map. const centerControlDiv = document.createElement("div"); // Create the control. This code calls a function that // creates a new instance of a button control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); // Add the control to the map at a designated control position // by pushing it on the position's array. This code will // implicitly add the control to the DOM, through the Map // object. You should not attach the control manually. map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
Özel Kontrol Örneği
Aşağıdaki kontrol basittir (ancak özellikle faydalı değildir) ve yukarıda gösterilen kalıpları birleştirir. Bu kontrol, haritayı belirli bir varsayılan konumda ortalayarak DOM 'click'
etkinliklerine yanıt verir:
TypeScript
let map: google.maps.Map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement('button'); // Set CSS for the control. controlButton.style.backgroundColor = '#fff'; controlButton.style.border = '2px solid #fff'; controlButton.style.borderRadius = '3px'; controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; controlButton.style.color = 'rgb(25,25,25)'; controlButton.style.cursor = 'pointer'; controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; controlButton.style.fontSize = '16px'; controlButton.style.lineHeight = '38px'; controlButton.style.margin = '8px 0 22px'; controlButton.style.padding = '0 5px'; controlButton.style.textAlign = 'center'; controlButton.textContent = 'Center Map'; controlButton.title = 'Click to recenter the map'; controlButton.type = 'button'; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener('click', () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement('div'); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement("div"); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;
Örneği Deneyin
Kontrollere Durum Ekleme
Kontroller de durumu depolayabilir. Aşağıdaki örnek daha önce gösterilene benzer ancak kontrolde ek bir "Ana Sayfayı Ayarla" düğmesi bulunur. Bu düğme, kontrolü yeni bir ev konumunu gösterecek şekilde ayarlar. Bunun için kontrol kapsamında bir home_
mülkü oluşturarak bu durumu depolar, bu durum için alıcı ve belirleyiciler sağlarız.
TypeScript
let map: google.maps.Map; const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { private map_: google.maps.Map; private center_: google.maps.LatLng; constructor( controlDiv: HTMLElement, map: google.maps.Map, center: google.maps.LatLngLiteral ) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter()!; if (newCenter) { this.center_ = newCenter; } }); } } function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { map_; center_; constructor(controlDiv, map, center) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter(); if (newCenter) { this.center_ = newCenter; } }); } } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;