Kontrollere Genel Bakış
Maps JavaScript API aracılığıyla görüntülenen haritalar, kullanıcının harita ile etkileşime girmesine olanak tanıyan kullanıcı arayüzü öğeleri içerir. Bu elementlere kontrol edebilir ve bu denetimlerin varyasyonlarını kabul edersiniz. Alternatif olarak, hiçbir şey yapmadan Maps JavaScript API tüm kontrol davranışlarını yönetir.
Aşağıdaki haritada, Haritalar JavaScript API'si:
Haritalarınızda kullanabileceğiniz denetimlerin tam listesi aşağıda verilmiştir:
- Yakınlaştırma denetimi, "+" işaretini gösteriyor. ve "-" düğmeler yakınlaştırma seviyesini değiştirmek için kullanılır. Bu denetim varsayılan olarak haritanın sağ alt köşesinde görünür.
- Kamera kontrolü, hem yakınlaştırma özelliğini hem de ve kaydırma kontrollerini içerir ve beta kanalı.
- Harita Türü denetimi, açılır menüden kullanılabilir.
Kullanıcının bir harita türü seçmesine olanak tanıyan yatay düğme çubuğu stili
(
ROADMAP
,SATELLITE
,HYBRID
veyaTERRAIN
) tıklayın. Bu kontrol, varsayılan olarak sol üstte görünür köşesindeki kartı tıklayın. - Street View kontrolü, Street View'u etkinleştirmek için haritaya sürüklenebilecek bir Pegman simgesi içerir. Bu denetim varsayılan olarak haritanın sağ alt kısmında görünür.
- Yönlendirme kontrolü, eğik görüntüler içeren haritalar için eğilme 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üler konusuna bakın.
- Ölçek denetimi bir harita ölçeği öğesi görüntüler. Bu denetim, varsayılan olarak devre dışıdır.
- Tam ekran kontrolü, içerikleri açma seçeneği sunar. görüntüleyebilirsiniz. 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, harita ile etkileşim kurmak için kullanılabilen klavye kısayollarının listesini gösterir.
Bu harita denetimlerine doğrudan erişmez veya bunları değiştirmezsiniz. Bunun yerine
haritanın görünürlüğü etkileyen MapOptions
alanlarını değiştirme
ve kontrollerin sunumudur. Kontrol sunusunu ayarlayabilirsiniz.
haritanızı örneklendirmek (uygun MapOptions
ile) veya
haritayı değiştirmek için setOptions()
çağırarak dinamik bir şekilde harita oluşturun
seçenekleri vardır.
Bu denetimlerin 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ü bölümüne bakın.
Varsayılan kullanıcı arayüzü
Harita çok küçükse (200x200 piksel) varsayılan olarak tüm denetimler kaybolur. Kontrolü açık bir şekilde görünür. Haritaya kontrol ekleme başlıklı makaleyi inceleyin.
Kontrollerin davranışı ve görünümü, tam ekran kontrolü hariç olmak üzere mobil ve masaüstü cihazlarda aynıdır (kontrol listesi bölümünde 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'nin varsayılan kullanıcı arayüzü düğmelerini tamamen kapatabilirsiniz. Bunun için,
haritanın disableDefaultUI
özelliğini (
MapOptions
nesnesi) true
konumuna getirin. Bu özellik, Maps JavaScript API'deki tüm kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Ancak bu, ana haritadaki fare hareketlerini veya gestureHandling
ve keyboardShortcuts
özellikleri tarafından kontrol edilen 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ünü kaldırarak, ekleyerek veya değiştirerek arayüzünüzü uyarlamak isteyebilirsiniz. değiştirmemesini sağlamalı ve gelecekteki güncellemelerin bu durumu gösterir. Yalnızca mevcut davranışı eklemek veya mevcut davranışı değiştirmek istiyorsanız kontrolün uygulamanıza açıkça eklendiğinden emin olun.
Bazı denetimler haritada varsayılan olarak görünür, bazıları ise görünmez
izin verilmez.
haritası aşağıdaki MapOptions
nesnesinde belirtildi:
görünür yapmak için true
olarak ayarladığınız veya
Gizlemek için false
:
{ zoomControl: boolean, cameraControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, rotateControl: boolean, fullscreenControl: boolean }
Harita 200x200 pikselden küçükse varsayılan olarak tüm denetimler kaybolur.
Kontrolü açıkça görünür olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Örneğin, aşağıdaki tabloda harita boyutuna ve zoomControl
alanının ayarına göre yakınlaştırma kontrolünün görünür olup olmadığı gösterilmektedir:
Harita boyutu | zoomControl |
Görünüyor mu? |
---|---|---|
Tümü | false |
Hayır |
Tümü | true |
Evet |
>= 200x200 piksel | undefined |
Evet |
< 200x200 piksel | undefined |
Hayır |
Aşağıdaki örnek, haritayı Yakınlaştırma özelliğini gizleyecek şekilde ve Ölçek kontrolünü görüntüleyin. Lütfen açıkça belirtmediğimizi Varsayılan kullanıcı arayüzünü devre dışı bırakın, böylece bu değişiklikler varsayılan kullanıcı arayüzüne eklemelidir gösterir.
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
Kontrol Seçenekleri
Çeşitli denetim seçenekleri yapılandırılabilir. Bu denetimler, davranışını veya davranışını değiştirmenize ya da nasıl değiştireceğinizi öğreneceğiz. Örneğin, Harita Türü kontrolü yatay çubuk veya açılır menü olarak görünebilir.
Bu kontroller, harita oluşturulduktan sonra MapOptions
nesnesinde uygun denetim seçenekleri alanları değiştirilerek değiştirilir.
Örneğin, Harita Türü denetimini değiştirme seçenekleri
mapTypeControlOptions
alanı boş bırakılamaz. Harita Türü denetimi,
aşağıdaki style
seçeneklerinden biri:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
, kontrol dizisini Google Haritalar'da gösterildiği gibi yatay bir çubukta düğmeler olarak gösterir.google.maps.MapTypeControlStyle.DROPDOWN_MENU
, ekranda açılır menü kullanarak harita türünü seçmenize olanak tanıyan tek düğmeli kontrol tıklayın.google.maps.MapTypeControlStyle.DEFAULT
, ekran boyutuna bağlı olan ve gelecekte değişebilen varsayılan davranış sürümleri bulunuyor.
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, bir Harita Türü denetimini DROPDOWN_MENU
stilini sergileyecek şekilde ayarlamak için MapOptions
nesnesinde aşağıdaki kodu kullanın:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
Aşağıdaki örnekte, denetimlerin 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,
denetimlerin sunuluşunu dinamik bir şekilde değiştirebilirsiniz.
Map
öğesinin setOptions()
yöntemi çağrılıyor,
yeni kontrol seçeneklerini iletebilirsiniz.
Denetimleri Değiştir
Haritanızı oluştururken bir kontrolün sunusunu belirtirsiniz
haritanın MapOptions
nesnesindeki alanlar arasında dolaşın. 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, haritanın sağ alt köşesinde görünür ve görünür. İlgili içeriği oluşturmak için kullanılanzoomControlOptions
alanı ayrıcaZoomControlOptions
bu kontrol için kullanılacak.cameraControl
kamera denetimini etkinleştirir/devre dışı bırakır. Bu denetim, beta kanalı.cameraControlOptions
alanı, bu denetim için kullanılacakCameraControlOptions
değerini de belirtir.mapTypeControl
, kullanıcının harita türleri (ör. Harita ve Uydu) arasında geçiş yapmasına olanak tanıyan Harita Türü kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim görünür ve sol üstte görünür köşesindeki kartı tıklayın.mapTypeControlOptions
alanı ek olarakMapTypeControlOptions
bu kontrol için kullanılacak.streetViewControl
, kullanıcının Street View panoramasını etkinleştirmesine olanak tanıyan Pegman kontrolünü etkinleştirir/devre dışı bırakır. Bu denetim, varsayılan olarak görünür ve sağ alt tarafa yakın bir yerdedir görebilirsiniz.streetViewControlOptions
alanı, bu denetim için kullanılacakStreetViewControlOptions
değerini de belirtir.rotateControl
, 45° görüntünün yönünü kontrol etmek için Döndür denetiminin görünürlüğünü etkinleştirir/devre dışı bırakır. Ölçüt kontrolün varlığı, varsayılan olarak kontrolün varlığına veya belirli bir harita türü için mevcut yakınlaştırma ve 45°'lik konum. Haritanın belirlemek içinrotateControlOptions
RotateControlOptions
tıklayın. 45° görüntü yoksa kontrolü gösteremezsiniz.scaleControl
, harita ölçeği sağlayan Ölçek kontrolünü etkinleştirir/devre dışı bırakır. Bu denetim varsayılan olarak görünmez. Zaman etkinleştirdiğinizde, her zaman haritanın sağ alt köşesinde görünür.scaleControlOptions
, bu denetim için kullanılacakScaleControlOptions
değerini de belirtir.fullscreenControl
, açılan denetimi etkinleştirir/devre dışı bırakır görüntüleyebilirsiniz. Varsayılan olarak, bu kontrol etkindir. en iyi uygulamaları paylaşacağız. Etkinleştirildiğinde kontrol, haritanın sağ üst kısmına yakın bir yerde görünür. İlgili içeriği oluşturmak için kullanılanfullscreenControlOptions
, ayrıcaFullscreenControlOptions
bu kontrol için kullanılacak.
İlk başta devre dışı bıraktığınız kontroller için seçenekler belirleyebileceğinizi unutmayın.
Konumlandırmayı kontrol etme
Kontrol seçeneklerinin çoğu, kontrolün haritada nereye yerleştirileceğini belirten bir position
mülkü (ControlPosition
türü) içerir. Bu denetimlerin konumu mutlak değildir. Bunun yerine
API, kontrollerin etrafta gezinerek akıllı bir şekilde yerleşmesini sağlar.
mevcut harita öğelerini veya diğer kontrolleri, verilen kısıtlamalar dahilinde (örneğin,
boyut) de ekleyebilirsiniz.
Not: Google Ads'in belirli bir kullanıcıya karmaşık düzenler nedeniyle kontroller çakışmayabilir. Ancak API, bunları akıllıca düzenlemeye çalışın.
Aşağıdaki kontrol konumları desteklenir:
TOP_CENTER
, denetimin haritanın üst ortasına yerleştirilmesi gerektiğini gösterir.TOP_LEFT
, kontrolün haritanın sol üst kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise üst ortayı "izlediğini" gösterir.TOP_RIGHT
, kontrolün yanına yerleştirilmesi gerektiğini gösterir "akan" denetiminin tüm alt öğeleriyle birlikte haritanın sağ üst köşesinde orta üst kısma doğru.LEFT_TOP
, kontrolün yanına yerleştirilmesi gerektiğini gösterir sol üst tarafta, ancak herhangi birTOP_LEFT
öğesinin altında.RIGHT_TOP
, denetimin haritanın sağ üst kısmına, ancakTOP_RIGHT
öğelerinin altına yerleştirilmesi gerektiğini gösterir.LEFT_CENTER
, kontrolün haritanın sol tarafına,TOP_LEFT
veBOTTOM_LEFT
konumları arasında ortalanmak üzere yerleştirilmesi gerektiğini belirtir.RIGHT_CENTER
, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sağ tarafı boyunca,TOP_RIGHT
veBOTTOM_RIGHT
konumları.LEFT_BOTTOM
, denetimin haritanın sol alt kısmına, ancakBOTTOM_LEFT
öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.RIGHT_BOTTOM
, kontrolün haritanın sağ alt kısmına, ancakBOTTOM_RIGHT
öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.BOTTOM_CENTER
, denetimin haritanın alt ortasına yerleştirilmesi gerektiğini gösterir.BOTTOM_LEFT
, kontrolün haritanın sol alt kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise alt ortağa doğru "aktığını" gösterir.BOTTOM_RIGHT
, kontrolün yerleştirilmesi gerektiğini gösterir kontrol öğesinin alt öğeleriyle birlikte sayfanın sağ alt köşesinde "akan" alt merkeze doğru.
Bu konumların, yerleşimlerini değiştiremediğiniz kullanıcı arayüzü öğelerinin (ör. telif hakkı ve Google logosu) konumlarıyla aynı olabileceğini unutmayın. Bu durumlarda kontroller, her konum için belirtilen mantığa göre akacak ve belirtilen konumlarına mümkün olduğunca yakın görünecektir.
Aşağıdaki örnekte, farklı konumlar.
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 yönetmek için kendi denetimlerinizi de oluşturabilirsiniz. Denetimler
bir haritanın üzerinde mutlak konumlarda yüzen sabit widget'lar
temel haritayla birlikte hareket eden yer paylaşımları yerine. Daha temel bir ifadeyle, kontrol, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzü görüntüleyen ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı veya harita ile etkileşimi yöneten bir <div>
öğesidir.
Kendi özel denetiminizi oluşturmak için birkaç kural gereklidir. Ancak şu kurallar en iyi uygulama olarak işlev görebilir:
- Kontrol öğelerinin gösterileceği uygun CSS'yi tanımlayın.
- Etkinlik işleyiciler aracılığıyla kullanıcı veya harita ile etkileşimi
harita özelliği değişiklikleri veya kullanıcı etkinlikleri (örneğin,
'click'
etkinlik). - Kontrolü tutmak için bir
<div>
öğesi oluşturun ve bu öğeyiMap
öğesinincontrols
özelliğine ekler.
Bu endişelerin her biri aşağıda ele alınmıştır.
Özel Denetimler Çizim
Kontrol panelinizi nasıl çizeceğiniz size bağlıdır. Genel olarak,
tüm kontrol sunumunuzu tek bir çatı altında
<div>
öğesi kullanarak kontrolünüzü
bir adet. Bu tasarım kalıbını aşağıda gösterilen örneklerde kullanacağız.
İlgi çekici kontroller tasarlamak için biraz CSS ve DOM bilgisi gerekir. inceleyeceğiz. Aşağıdaki kodda, haritayı Chicago'ya odaklanacak şekilde kaydıran bir düğme öğesi oluşturma işlevi 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 Denetimlerden Gelen Etkinlikleri Yönetme
Bir kontrolün yararlı olması için gerçekten bir şey yapması gerekir. Kontrolün işleyiş şekli size bağlıdır. Kontrol, kullanıcı girişlerine yanıt verebilir veya
Map
öğesinin durumundaki değişikliklere.
Kullanıcı girişine yanıt vermek için addEventListener()
öğesini kullanın. Bu öğe, desteklenen DOM etkinliklerini işler. İlgili içeriği oluşturmak için kullanılan
Aşağıdaki kod snippet'i, tarayıcının 'click'
öğesi için bir işleyici ekler.
unutmayın. Bu etkinliğin haritadan değil, DOM'den 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 öğelerini kullanın. DIV öğesini yalnızca yerel denetimleri barındıran bir kapsayıcı olarak kullanın. DIV öğesini hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak yeniden amaçlamayın.
label
öğesini,title
özelliğini veyaaria-label
özelliğini kullanın özelliğini kullanın.
Konumlandırma Özel Kontrolleri
Özel kontroller, Map
nesnesinin controls
özelliğindeki uygun konumlara yerleştirilerek haritada konumlandırılır. Bu mülk bir google.maps.ControlPosition
dizisi içerir. Uygun bir ControlPosition
'ye Node
(genellikle <div>
) ekleyerek haritaya özel bir denetim eklersiniz. (Bu programlar hakkında
Konumlandırmayı Kontrol Etme bölümüne bakın
above.)
Her ControlPosition
, bir MVCArray
kontrollerinin olması gerekir. Bu nedenle, kontroller eklendiğinde veya
kaldırılırsa API, denetimleri uygun şekilde günceller.
API, denetimleri her konuma bir index
mülkünün sırasına göre yerleştirir. Daha düşük dizinli denetimler önce yerleştirilir.
Örneğin, BOTTOM_RIGHT
konumundaki iki özel kontrol,
bu endeks sırasına göre düzenlenir ve daha düşük indeks değerleri
önceliklendirme. Varsayılan olarak tüm özel denetimler, resim yerleştirildikten sonra
tüm API varsayılan denetimlerine dokunun. Bir denetimin index
mülkünü negatif bir değere ayarlayarak bu davranışı geçersiz kılabilirsiniz. Özel kontroller
logonun soluna veya sağına yerleştirilemez.
telif hakları.
Aşağıdaki kod yeni bir özel denetim oluşturur (bunun kurucusu
gösterilir) ve bunu haritaya TOP_RIGHT
konumuna 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 Denetleyici Örneği
Aşağıdaki denetim basittir (ancak özellikle faydalı değildir) ve
yukarıda gösterilen kalıpları birleştiriyor. Bu kontrol, DOM'ye yanıt verir
Haritayı belirli bir varsayılan değerde ortalayarak 'click'
etkinlik
konum:
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, durumu da depolayabilir. Aşağıdaki örnek, daha önce gösterilen örneğe benzer ancak kontrol, kontrolü yeni bir ev konumu gösterecek şekilde ayarlayan ek bir "Evi Ayarla" düğmesi içerir. Bunu,
Bu durumu depolamak için kontrol altında home_
özelliği ve
eyaletin belirleyicileri ve belirleyicileri sağlamak.
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;