Denetimler

Platform seçin: Android iOS JavaScript

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 kontrol olarak bilinir ve bu denetimlerin varyasyonlarını uygulamanıza ekleyebilirsiniz. Alternatif olarak, hiçbir şey yapmayıp tüm kontrol davranışlarını Maps JavaScript API'nin işlemesine izin verebilirsiniz.

Aşağıdaki haritada, Maps JavaScript API tarafından görüntülenen varsayılan kontrol grubu gösterilmektedir:

Haritalarınızda kullanabileceğiniz denetimlerin tam listesi aşağıda verilmiştir:

  • Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için "+" ve "-" düğmelerini gösterir. Bu denetim, varsayılan olarak haritanın sağ alt köşesinde görünür.
  • Harita Türü denetimi, açılır liste veya yatay düğme çubuğu stilinde bulunur. Bu stil, kullanıcının bir harita türü (ROADMAP, SATELLITE, HYBRID veya TERRAIN) seçmesine olanak tanır. Bu denetim, varsayılan olarak haritanın sol üst köşesinde görünür.
  • Street View denetimi, Street View'ı etkinleştirmek için haritaya sürüklenebilecek bir Pegman simgesi içerir. Bu denetim, haritanın sağ alt köşesinde varsayılan olarak görünür.
  • Döndürme denetimi, eğik görüntüler içeren haritalar için yatırma ve döndürme seçeneklerinin bir birleşimini sağlar. Bu denetim, haritanın sağ alt köşesinde varsayılan olarak görünür. Daha fazla bilgi için 45° görüntülere 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ü, 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şime geçmek için kullanılan 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, haritaların görünürlüğünü ve denetimlerin sunumunu etkileyen MapOptions alanlarını değiştirirsiniz. Haritanızın örneğini oluşturduktan sonra kontrol sunumunu ayarlayabilir (uygun MapOptions ile) veya harita seçeneklerini değiştirmek için setOptions() çağrısı yaparak haritayı dinamik olarak değiştirebilirsiniz.

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ü'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 ayarlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya Denetim Ekleme konusuna bakın.

Tam ekran kontrolü hariç, denetimlerin davranışı ve görünümü 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'nin varsayılan kullanıcı arayüzü düğmelerini tamamen devre dışı bırakabilirsiniz. Bunu yapmak için haritanın disableDefaultUI özelliğini (MapOptions nesnesinin içinde) true olarak ayarlayın. Bu özellik, Maps JavaScript API'deki tüm kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Bununla birlikte, temel harita üzerinde 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;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
Örneği inceleyin

Örneği Deneyin

Denetimler Haritaya Ekleniyor

İsterseniz kullanıcı arayüzü davranış veya denetimlerini kaldırarak, ekleyerek ya da değiştirerek arayüzünüzü uyarlayabilir ve gelecekteki güncellemelerin bu davranışı değiştirmemesini sağlayabilirsiniz. Yalnızca mevcut davranışı eklemek veya değiştirmek istiyorsanız denetimin uygulamanıza açıkça eklendiğinden emin olmanız gerekir.

Bazı denetimler haritada varsayılan olarak görünürken, bazıları siz özel olarak istemedikçe görünmez. Haritadan denetim ekleme veya mevcut denetimleri kaldırma aşağıdaki MapOptions nesnesinin alanlarında belirtildi. Bu alanları görünür hale getirmek 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 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 denetiminin görünür olup olmadığı gösterilmektedir:

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 ö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ızdan, bu değişikliklerin varsayılan kullanıcı arayüzü davranışına ekleme niteliğinde 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;
index.ts

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;
index.js
Örneği inceleyin

Örneği Deneyin

Denetim Seçenekleri

Çeşitli kontroller yapılandırılabilir. Bu sayede, çalışma biçimini veya görünümlerini değiştirebilirsiniz. Örneğin, Harita Türü denetimi, yatay çubuk veya açılır menü olarak görünebilir.

Bu denetimler, harita oluşturulduktan sonra MapOptions nesnesi içindeki uygun seçenekler alanları değiştirilerek değiştirilir.

Örneğin, Harita Türü denetimini değiştirme seçenekleri mapTypeControlOptions alanında belirtilmiştir. Harita Türü denetimi aşağıdaki style seçeneklerinden 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örüntüler.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU, açılır menüden harita türünü seçmenize olanak tanıyan tek düğmeli bir kontrol gösterir.
  • 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ü denetimi ayarlamak için MapOptions nesnesinde 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;
index.ts

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;
index.js
Örneği inceleyin

Örneği Deneyin

Denetimler genellikle harita oluşturulduktan sonra yapılandırılır. Bununla birlikte, Map setOptions() yöntemini çağırıp yeni kontrol seçenekleri ileterek kontrollerin sunumunu dinamik olarak değiştirebilirsiniz.

Denetimleri Değiştirme

Haritayı, haritanın MapOptions nesnesindeki alanlar aracılığıyla oluşturduğunuzda bir kontrolün sunusunu 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ılacak ZoomControlOptions değerini de belirtir.
  • mapTypeControl, kullanıcının harita türleri (Harita ve Uydu gibi) arasında geçiş yapmasını sağlayan Harita Türü denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim, haritanın sol üst köşesinde görünür ve görünür. mapTypeControlOptions alanı, bu kontrol için kullanılacak MapTypeControlOptions değerini de belirtir.
  • streetViewControl, kullanıcının Street View panoramasını etkinleştirmesine olanak tanıyan Pegman denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim görünür ve haritanın sağ alt köşesinde görünür. streetViewControlOptions alanı, bu kontrol için kullanılacak StreetViewControlOptions değerini de belirtir.
  • rotateControl, 45° görüntülerin yönünü kontrol etmek için 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 konumda belirli bir harita türü için 45° görüntülerin olup olmamasına göre belirlenir. Haritanın kullanılacak RotateControlOptions öğesini belirtmek için rotateControlOptions özelliğini ayarlayarak kontrolün davranışını değiştirebilirsiniz. Şu anda 45° görüntü yoksa denetimin 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. Bu denetim, varsayılan olarak 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ılacak ScaleControlOptions öğesini de belirtir.
  • fullscreenControl, haritayı tam ekran modunda açan denetimi etkinleştirir/devre dışı bırakır. Bu kontrol, masaüstü ve Android cihazlarda varsayılan olarak etkindir. Denetim etkinleştirildiğinde, haritanın sağ üst köşesinde görünür. fullscreenControlOptions, ayrıca bu kontrol için kullanılacak FullscreenControlOptions öğesini de belirtir.

Başlangıçta devre dışı bıraktığınız denetimlerle ilgili seçenekleri belirleyebileceğinizi unutmayın.

Kontrol Konumlandırma

Çoğu kontrol seçeneği, denetimin haritada nereye yerleştirileceğini gösteren bir position özelliği (ControlPosition türünde) içerir. Bu denetimlerin konumu mutlak değildir. Bunun yerine, API, kontrolleri belirli kısıtlamalar (harita boyutu gibi) dahilinde mevcut harita öğeleri veya diğer denetimler etrafında dağıtarak akıllı bir şekilde yerleştirecektir.

Not: Karmaşık düzenler nedeniyle kontrollerin çakışmayacağına dair 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 orta kısmına yerleştirilmesi gerektiğini gösterir.
  • TOP_LEFT, kontrolün, haritanın sol üst kısmına, "akan" denetimin alt öğeleri üst orta tarafa doğru olacak şekilde yerleştirilmesi gerektiğini belirtir.
  • TOP_RIGHT, kontrolün, "akan" denetimin alt öğeleri üst orta tarafa doğru olacak şekilde, haritanın sağ üst kısmına yerleştirilmesi gerektiğini belirtir.
  • LEFT_TOP, denetimin haritanın sol üst kısmına, ancak tüm TOP_LEFT öğelerinin altına yerleştirilmesi gerektiğini belirtir.
  • RIGHT_TOP, denetimin haritanın sağ üst tarafına, ancak tüm TOP_RIGHT öğelerinin altına yerleştirilmesi gerektiğini belirtir.
  • LEFT_CENTER, denetimin haritanın sol tarafına, TOP_LEFT ve BOTTOM_LEFT konumları arasında ortalanarak yerleştirilmesi gerektiğini belirtir.
  • RIGHT_CENTER, denetimin haritanın sağ tarafına, TOP_RIGHT ve BOTTOM_RIGHT konumları arasına ortalanarak yerleştirilmesi gerektiğini belirtir.
  • LEFT_BOTTOM, denetimin haritanın sol alt tarafına, ancak tüm BOTTOM_LEFT öğelerinin üzerine yerleştirilmesi gerektiğini belirtir.
  • RIGHT_BOTTOM, denetimin haritanın sağ alt tarafına, ancak tüm BOTTOM_RIGHT öğelerinin üzerine yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_CENTER, denetimin, haritanın alt orta kısmına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_LEFT, denetimin, haritanın sol alt kısmına, tüm alt öğeleri alt ortaya doğru "akan" olacak şekilde, yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_RIGHT, denetimin haritanın sağ alt kısmına, denetimin alt öğeleri alt ortaya doğru "kayacak" şekilde yerleştirilmesi gerektiğini belirtir.

Bu konumların, yerleşimleri değiştiremeyeceğiniz kullanıcı arayüzü öğelerinin (telif hakları ve Google logosu gibi) konumlarıyla çakışabileceğini unutmayın. Böyle 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ünür.

Aşağıdaki örnekte, tüm denetimlerin etkinleştirildiği, farklı konumlarda bulunan 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;
index.ts

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;
index.js
Örneği inceleyin

Ö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şturabilirsiniz. Kontroller, alttaki haritayla birlikte hareket eden yer paylaşımlarının aksine haritanın üzerinde mutlak konumlarda kayan sabit widget'lardır. Kontroller temelde haritada mutlak bir konuma sahip olan, kullanıcıya kullanıcı arayüzü gösteren ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı ya da harita ile etkileşimi yöneten bir <div> öğesidir.

Kendi özel denetiminizi oluşturmak için az sayıda kural gereklidir. Bununla birlikte, aşağıdaki yönergeler en iyi uygulama olabilir:

  • Kontrol öğelerinin gösterileceği uygun CSS'yi 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 yönetin.
  • Kontrolü tutmak için bir <div> öğesi oluşturun ve bu öğeyi Map öğesinin controls özelliğine ekleyin.

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, denetiminizi tek bir birim olarak değiştirebilmek için tüm kontrol sununuzu tek bir <div> öğesine yerleştirmenizi öneririz. Bu tasarım kalıbını aşağıda gösterilen örneklerde kullanacağız.

İlgi çekici denetimler tasarlamak, biraz CSS ve DOM yapısı bilgisi gerektirir. Aşağıdaki kodda, haritayı Chicago merkezli olacak şekilde kaydıran bir düğme öğesi oluşturmaya yönelik 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 Denetimlerden Gelen Etkinlikleri Yönetme

Bir kontrolün yararlı olması için gerçekten bir şey yapması gerekir. Kontrolün ne olacağı size bağlıdır. Kontrol, kullanıcı girişlerine 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'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. Yerel denetimleri tutmak için kapsayıcı olarak yalnızca bir DIV öğesini kullanın. Bir DIV öğesini asla etkileşimli bir kullanıcı arayüzü öğesi olarak yeniden kullanmayın.
  • Bir kullanıcı arayüzü öğesi hakkında bilgi sağlamak için uygun olduğunda label öğesini, title özelliğini veya aria-label özelliğini kullanın.

Özel Denetimleri Konumlandırma

Özel denetimler, Map nesnesinin controls özelliği içindeki uygun konumlara yerleştirilerek harita üzerinde konumlandırılır. Bu mülk, google.maps.ControlPosition dizisi içeriyor. Node öğesini (genellikle <div>) uygun ControlPosition öğesine ekleyerek haritaya özel denetim sağlar. (Bu konumlar hakkında bilgi edinmek için yukarıdaki Kontrol Konumlandırma bölümüne bakın.)

Her ControlPosition, ilgili konumda görüntülenen denetimlerin MVCArray kadarını depolar. Sonuç olarak, konuma kontrol eklendiğinde veya konuma kontrol kaldırıldığında API, kontrolleri uygun şekilde günceller.

API, kontrolleri her konuma index mülkünün sırasına göre yerleştirir; daha düşük dizine sahip kontroller daha üstte yer alır. Örneğin, BOTTOM_RIGHT konumundaki iki özel kontrol bu dizin sırasına göre yerleştirilir ve daha düşük dizin değerleri öncelikli olur. Varsayılan olarak tüm özel denetimler, API varsayılan denetimleri yerleştirildikten sonra yerleştirilir. Bir kontrolün index özelliğini negatif değere 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şturucusu gösterilmez) ve TOP_RIGHT konumunda haritaya 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 denetim, haritayı belirli bir varsayılan konuma 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;
index.ts

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;
index.js
Örneği inceleyin

Örneği Deneyin

Kontrollere Durum Ekleme

Kontroller, durumu da depolayabilir. Aşağıdaki örnek daha önce gösterilene benzer ancak kontrol, kontrolü yeni bir ev konumu gösterecek şekilde ayarlayan ek bir "Ana Sayfa Ayarla" düğmesi içerir. Bunu, bu durumu depolamak ve bu durum için alıcılar ve belirleyiciler sağlamak üzere kontrol içinde bir home_ mülkü oluşturarak yaparı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;
index.ts

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;
index.js
Örneği inceleyin

Örneği Deneyin