Kontrollere Genel Bakış
Maps JavaScript API üzerinden görüntülenen haritalar, kullanıcı arayüzü içerir öğelerini kullanın. Bu elementlere kontrol edebilir ve bu denetimlerin varyasyonlarını bir uygulamadır. 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 sağ alt köşesinde görebilirsiniz.
- 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 denetim, varsayılan olarak sol üstte görünür köşesindeki kartı tıklayın. - Street View denetimi bir Pegman simgesi içeriyor için haritaya sürüklenebilir. Bu kontrol sağ alt tarafa yakın bir yerde varsayılan olarak görünür.
- Döndürme kontrolü şunların bir kombinasyonunu sağlar: eğik görüntüler içeren haritalar için yatırma ve döndürme seçenekleri. Bu Haritanın sağ alt tarafına yakın yerde varsayılan olarak görünür. Görüntüleyin 45 °F görüntüleri inceleyin.
- Ö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 kontrol, masaüstü bilgisayarlarda ve mobil cihazlar. Not:iOS tam ekran özelliğini desteklemiyor. Bu nedenle, tam ekran kontrolü iOS cihazlarda görünmez.
- Klavye kısayolları denetimi bir liste görüntüler. klavye kısayollarını kullanabilirsiniz.
Bu harita denetimlerine doğrudan erişemez veya bu denetimleri değiştiremezsiniz. 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ü hakkında bilgi edinmek için nasıl değiştirileceği hakkında daha fazla bilgi için Varsayılan kullanıcı arayüzü aşağıdadır.
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. Bkz. Harita.
Denetimlerin davranışı ve görünümü, mobil cihazlarda ve (tam ekran kontrolü hariç) (bkz. kontrol listesinde açıklandığı şekilde).
Ayrıca, klavye kullanımı tüm cihazlarda varsayılan olarak açıktır.
Varsayılan kullanıcı arayüzünü devre dışı bırak
API'nin varsayılan kullanıcı arayüzü düğmelerini tamamen devre dışı bırakabilirsiniz. Bunun için,
haritanın disableDefaultUI
özelliğini (
MapOptions
nesnesi) true
konumuna getirin. Bu mülk
Maps JavaScript API'deki kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Google
ancak tabanda fare hareketlerini veya klavye kısayollarını etkilemez
haritası, gestureHandling
ve tarafından kontrol edilen
Sırasıyla keyboardShortcuts
.
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
Denetimleri Haritaya Ekleyin
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 bir şekilde
görünür. Örneğin, aşağıdaki tabloda, yakınlaştırma kontrolünün
(haritanın boyutuna ve söz konusu gösterimin
zoomControl
alanı:
Harita boyutu | zoomControl |
Görünür mü? |
---|---|---|
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
Denetim 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. için, Harita Türü denetimi, yatay çubuk veya açılır menü olarak görünebilir.
Bu denetimler, uygun kontrol seçenekleri değiştirilerek değiştirilir
alanları MapOptions
nesnesinin içinde bulabilir.
Ö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
, Google'da gösterildiği gibi yatay çubuktaki düğmeler şeklinde kontroller dizisi Haritalar.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, kullandığınız tüm kontrol seçeneklerini açıkça
uygun MapOptions
değerini ayarlayarak kontrolü de değiştirebilirsiniz.
Hedef: true
. Örneğin, bir harita türü denetimi ayarlamak için
DROPDOWN_MENU
stilini göstermek için,
MapOptions
nesnesi:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
Aşağıdaki örnekte, varsayılan konumun nasıl değiştirileceğini ve kontrol edebilirsiniz.
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ı ek olarakZoomControlOptions
bu kontrol için kullanılacak.cameraControl
, kamera kontrolünü etkinleştirir/devre dışı bırakır. Bu kontrol, beta kanalı kullanılarak oluşturulan haritalarda varsayılan olarak görünür.cameraControlOptions
alanı ayrıcaCameraControlOptions
bu kontrol için kullanılacak.mapTypeControl
, Harita Türü denetimini etkinleştirir/devre dışı bırakır Kullanıcının harita türleri (Haritalar ve Uydu gibi) arasında geçiş yapmasını sağlar. 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
, Pegman denetimini etkinleştirir/devre dışı bırakır Kullanıcının bir Street View panoramasını etkinleştirmesini sağlayan bir düğme. Bu denetim, varsayılan olarak görünür ve sağ alt tarafa yakın bir yerdedir görebilirsiniz.streetViewControlOptions
alanı ek olarakStreetViewControlOptions
bu kontrol için kullanılacak.rotateControl
, bir 45° görüntülerin yönünü kontrol etmek için döndürme kontrolü. Ö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 denetimin görünmesini sağlayamazsınız.scaleControl
, aşağıdakileri yapan Ölçek denetimini etkinleştirir/devre dışı bırakır harita ölçeği sağlar. Bu denetim, varsayılan olarak görünmez. Zaman etkinleştirdiğinizde, her zaman haritanın sağ alt köşesinde görünür. İlgili içeriği oluşturmak için kullanılanscaleControlOptions
, ayrıcaScaleControlOptions
bu kontrol için kullanılacak.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. Denetim etkinleştirildiğinde, haritanın sağ üst köşesinde görünür. İlgili içeriği oluşturmak için kullanılanfullscreenControlOptions
, ayrıcaFullscreenControlOptions
bu kontrol için kullanılacak.
Başlangıçta devre dışı bıraktığınız denetimlerle ilgili seçenekleri belirleyebileceğinizi unutmayın.
Kontrol Konumlandırma
Kontrol seçeneklerinin çoğu position
özelliği içerir
(tür türü: ControlPosition
) haritada nereye gösterilir?
nasıl yerleştireceğim. 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: API, denetimleri akıllıca düzenlemeye çalışsa da karmaşık düzenlerde denetimlerin örtüşmeyeceği konusunda garanti verilemez.
Aşağıdaki kontrol konumları desteklenir:
TOP_CENTER
, kontrolün yerleştirilmesi gerektiğini gösterir üst orta boyunca seçin.TOP_LEFT
, kontrolün yanına yerleştirilmesi gerektiğini gösterir "akan" denetiminin tüm alt öğeleriyle birlikte haritanın sol üst köşesinde orta üst kısma doğru.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
, kontrolün yanına yerleştirilmesi gerektiğini gösterir haritanın sağ üst köşesinde, herhangi birTOP_RIGHT
altında öğeler.LEFT_CENTER
, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sol tarafında,TOP_LEFT
şeklinde ortalanmış veBOTTOM_LEFT
konum.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
, kontrolün yerleştirilmesi gerektiğini gösterir ekranın alt orta kısmında.BOTTOM_LEFT
, kontrolün yerleştirilmesi gerektiğini gösterir kontrol öğesinin alt öğeleriyle birlikte sayfanın sol alt köşesinde "akan" alt merkeze doğru.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, kullanıcı arayüzü öğelerinin konumları ile çakışabileceğini unutmayın yerleşimlerini değiştiremeyeceğiniz (telif hakları ve Google logosu gibi) kişiler. Bu tür durumlarda kontroller, ve belirttikleri konuma mümkün olduğunca yakın dokunun.
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 oluşturabilir. Denetimler
bir haritanın üzerinde mutlak konumlarda yüzen sabit widget'lar
temel haritayla birlikte hareket eden yer paylaşımları yerine. Daha fazla
Kontrol, temelde kontrol edilmesini sağlayan bir <div>
öğesidir.
haritada mutlak bir konuma sahiptir, kullanıcıya kullanıcı arayüzü görüntüler ve
kullanıcı veya haritayla etkileşimi yönetir (genellikle bir etkinlik üzerinden)
gösterir.
Kendi özel denetiminizi oluşturmak için az sayıda 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ınmaktadır.
Özel Denetimler Çizim
Kontrolü nasıl ele aldığınız 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, düğme öğesi oluşturmak için kullanılan bir işlev gösterilmektedir merkezi olarak Chicago merkezli bir hale getirir.
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 nedir?
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 desteklenen DOM etkinliklerini işleyen addEventListener()
kullanın. İ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. Yalnızca DIV kullan öğesini bir kapsayıcı olarak kullanır. bir DIV öğesini hiçbir zaman etkileşimli kullanıcı arayüzü olarak yeniden kullanma öğesine dokunun.
label
öğesini,title
özelliğini veyaaria-label
özelliğini kullanın özelliğini kullanın.
Özel Denetimleri Konumlandırma
Özel denetimler harita üzerinde uygun konumlara yerleştirilerek konumlandırılır
Map
nesnesinin controls
içindeki konumları
Bu mülk
google.maps.ControlPosition
sn. Dosya adına,
haritası Node
(genellikle <div>
) ekleyerek
uygun bir ControlPosition
olarak ayarlayın. (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, kontrolleri her konuma
index
mülk; dizini daha düşük olan kontroller ilk sıraya 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
kontrolün index
özelliğinin negatif bir değer olmasını sağlayın. Ö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 Kontrol Ö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 buna benzerdir
kontrol düğmesi ek bir "Evi Ayarla" seçeneği içeriyor hangi düğmenin
kontrolü yeni bir ev konumunu gösterecek şekilde ayarlar. Bunu,
Bu durumu depolamak için kontrol altında home_
özelliği ve
eyaletin belirleyicilerini 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;