Kontroller

Platformu seçin: Android iOS JavaScript

Kontrollere Genel Bakış

Maps JavaScript API aracılığıyla gösterilen haritalar, kullanıcıların haritayla etkileşimde bulunmasını sağlamak için kullanıcı arayüzü öğeleri içerir. Bu kontrol öğeleri, kontrol olarak bilinir ve bu denetimlerin varyasyonlarını uygulamanıza ekleyebilirsiniz. Alternatif olarak, hiçbir işlem yapmadan Haritalar JavaScript API'nin tüm kontrol davranışını işlemesine izin verebilirsiniz.

Aşağıdaki harita, Maps JavaScript API tarafından görüntülenen varsayılan kontrol grubunu göstermektedir:

Haritalarınızda kullanabileceğiniz kontrollerin tam listesini aşağıda bulabilirsiniz:

  • Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için kullanılan "+" ve "-" düğmelerini görüntüler. Bu kontrol, varsayılan olarak haritanın sağ alt köşesinde gösterilir.
  • Harita Türü kontrolü, kullanıcının bir harita türü (ROADMAP, SATELLITE, HYBRID veya TERRAIN) seçmesine olanak tanıyan açılır veya yatay düğme çubuğu şeklinde sunulur. Bu kontrol, varsayılan olarak haritanın sol üst köşesinde görünür.
  • Street View kontrolü, Street View'u etkinleştirmek için haritaya sürüklenebilen bir Pegman simgesi içerir. Bu kontrol, 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 eğim ve döndürme seçeneklerinin bir kombinasyonunu sunar. Bu kontrol, 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 kontrolü bir harita ölçeği öğesi gösterir. 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ı kontrolü, haritayla etkileşimde bulunmak için klavye kısayollarının listesini gösterir.

Bu harita kontrollerine doğrudan erişemez veya bu denetimleri değiştiremezsiniz. Bunun yerine, kontrolün görünürlüğünü ve sunulmasını etkileyen MapOptions alan alanını değiştirirsiniz. Haritanızı örneklendirirken (uygun MapOptions ile) kontrol sunumunu ayarlayabilir veya haritanın seçeneklerini değiştirmek için setOptions() yöntemini çağırarak 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ü 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ün açıkça görünür olmasını sağlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya Denetimler Ekleme konusuna bakın.

Tam ekran denetimi hariç, kontrollerin 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 kapatmak isteyebilirsiniz. Bunu yapmak için haritanın disableDefaultUI özelliğini (MapOptions nesnesi 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, gestureHandling ve keyboardShortcuts özellikleri tarafından kontrol edilen temel harita üzerinde 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 göster

Örneği Deneyin

Kontrolleri Haritaya Ekleme

Kullanıcı arayüzü davranışını veya kontrolleri kaldırarak, ekleyerek ya da değiştirerek arayüzünüzü özelleştirebilir 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 bir şekilde eklendiğinden emin olmanız gerekir.

Bazı kontroller varsayılan olarak haritada görünürken diğerlerinde özel olarak istekte bulunmadığınız sürece görünmez. Haritaya kontrollerin eklenmesi veya kaldırılması, aşağıdaki MapOptions nesnesinin alanlarında belirtilir. Bunları, görünür olması için true veya gizlemek için false olarak ayarlarsı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ün açıkça görünür olmasını sağlayarak 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
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österecektir. Varsayılan kullanıcı arayüzünü açıkça devre dışı bırakmadığımızı unutmayın. Bu değişiklikler, varsayılan kullanıcı arayüzü davranışını tamamlayıcı niteliktedir.

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 göster

Örneği Deneyin

Kontrol Seçenekleri

Bazı denetimler yapılandırılabilir. Bu da, davranışlarını veya görünümlerini değiştirmenize olanak tanır. Örneğin, Harita Türü kontrolü yatay bir çubuk veya açılır menü olarak görünebilir.

Bu kontroller, harita oluşturulduktan sonra MapOptions nesnesinde uygun kontrol seçenekleri alanları değiştirilerek yapılır.

Örneğin, Harita Türü denetimini değiştirme seçenekleri mapTypeControlOptions alanında belirtilir. Harita Türü kontrolü aşağıdaki style seçeneklerinden birinde görünebilir:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR, kontrol grubunu 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 bir harita türü seçmenize olanak tanıyan tek bir düğme 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 da kontrolü açıkça etkinleştirmeniz gerektiğini unutmayın. Örneğin, DROPDOWN_MENU stilini göstermek üzere Harita Türü kontrolü 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 göster

Örneği Deneyin

Kontroller genellikle harita oluşturulduğunda yapılandırılır. Ancak Map öğesinin setOptions() yöntemini çağırarak kontrollerin sunumunu dinamik olarak değiştirebilir ve yeni kontrol seçenekleri iletebilirsiniz.

Denetimleri Değiştirme

Haritanın MapOptions nesnesindeki alanlar üzerinden haritanızı oluştururken 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 kontrol görünür ve haritanın sağ alt kısmına yakın bir yerde görünür. Ayrıca zoomControlOptions alanı, bu kontrol için kullanılacak ZoomControlOptions öğesini belirtir.
  • mapTypeControl, kullanıcıların harita türleri (Harita ve Uydu gibi) arasında geçiş yapabilmesini sağlayan Harita Türü denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu kontrol görünür ve haritanın sol üst köşesinde görünür. mapTypeControlOptions alanı, bu kontrol için kullanılacak MapTypeControlOptions öğesini 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 kontrol, haritanın sağ alt kısmına yakın bir yerde görünür ve görünür. streetViewControlOptions alanı, bu kontrol için kullanılacak StreetViewControlOptions öğesini de belirtir.
  • rotateControl, 45° görüntülerin yönünü kontrol etmek için döndürme denetiminin görünümünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün varlığı belirli bir harita türü için mevcut yakınlaştırma ve konum ayarında 45° görüntü olup olmamasına göre belirlenir. Kullanılacak RotateControlOptions öğesini belirtmek için haritanın rotateControlOptions özelliğini ayarlayarak kontrolün davranışını değiştirebilirsiniz. Şu anda 45° görüntü yoksa denetimi gösteremezsiniz.
  • 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. Etkinleştirildiğinde, her zaman haritanın sağ alt köşesinde görünür. scaleControlOptions, bu kontrol için kullanılacak ScaleControlOptions'yi de belirtir.
  • fullscreenControl, haritayı tam ekran modunda açan kontrolü etkinleştirir/devre dışı bırakır. Bu denetim, masaüstü ve Android cihazlarda varsayılan olarak etkindir. Etkinleştirildiğinde, kontrol, haritanın sağ üst köşesine yakın bir yerde görünür. fullscreenControlOptions, bu kontrol için kullanılacak FullscreenControlOptions'yi de belirtir.

Başlangıçta devre dışı bırakacağınız kontroller için seçenekler belirtebileceğinizi unutmayın.

Kontrol Konumlandırma

Kontrol seçeneklerinin çoğu, kontrolün nereye yerleştirileceğini belirten bir position özelliği (ControlPosition türünde) içerir. Bu denetimlerin konumlandırması kesin değildir. Bunun yerine, API mevcut sınırların (ör. harita boyutu) sınırları dahilinde mevcut kontrolleri veya diğer kontrolleri yöneterek bilgileri akıllı bir şekilde yerleştirir.

Not: API'nin bunları akıllı bir şekilde düzenlemeye çalışacağı ancak karmaşık düzenlerle çakıştığına dair herhangi bir garanti verilemez.

Aşağıdaki kontrol konumları desteklenir:

  • TOP_CENTER, kontrolün haritanın üst orta kısmına yerleştirilmesi gerektiğini belirtir.
  • TOP_LEFT, kontrolün sol üst tarafına, kontrolün alt öğelerini üst ortaya doğru "aktarma" yapılması gerektiğini belirtir.
  • TOP_RIGHT, kontrolün sağ üst kısmına, kontrolün alt öğelerini "götür"ün üst merkezine doğru yerleştirilmesi gerektiğini belirtir.
  • LEFT_TOP, kontrolün haritanın sol üst kısmına, ancak herhangi bir TOP_LEFT öğesinin altına yerleştirilmesi gerektiğini belirtir.
  • RIGHT_TOP, kontrolün herhangi bir TOP_RIGHT öğesinin altına, haritanın sağ üst kısmına yerleştirilmesi gerektiğini belirtir.
  • LEFT_CENTER, kontrolün TOP_LEFT ve BOTTOM_LEFT konumları arasına ortalanmış olacak şekilde haritanın sol tarafına yerleştirilmesi gerektiğini belirtir.
  • RIGHT_CENTER, kontrolün TOP_RIGHT ve BOTTOM_RIGHT konumları arasına ve haritanın sağ tarafına yerleştirilmesi gerektiğini belirtir.
  • LEFT_BOTTOM, kontrolün herhangi bir BOTTOM_LEFT öğesinin altına sol alt bölümüne yerleştirilmesi gerektiğini belirtir.
  • RIGHT_BOTTOM, kontrolün herhangi bir BOTTOM_RIGHT öğesinin üzerine değil, haritanın sağ alt kısmına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_CENTER, kontrolün haritanın alt merkezine yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_LEFT, kontrolün alt orta kısmına "kontrol" alt öğesi akışıyla birlikte haritanın sol alt kısmına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_RIGHT, kontrolün alt merkezine doğru "akan" kontrol öğelerini içeren "alt" öğelerine sahip kontrolün 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 (ör. telif hakkı ve Google logosu) konumları ile çakışabileceğini unutmayın. Bu gibi durumlarda, kontroller her bir konum için belirtilen mantığa göre hareket eder ve belirtilen konuma mümkün olduğunca yakın görünür.

Aşağıdaki örnekte tüm kontrollerin farklı konumlarda etkinleştirildiği 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 göster

Ö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 kontrollerinizi oluşturabilirsiniz. Kontroller, esas haritayla birlikte hareket eden yer paylaşımları yerine, mutlak konumlarda bir haritanın üzerinde kayan sabit widget'lardır. Daha basitçe açıklamak gerekirse kontrol, haritada mutlak bir konuma sahip, kullanıcıya bazı kullanıcı arayüzü görüntüler ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı veya haritayla etkileşimi işleyen bir <div> öğesidir.

Kendi özel kontrolünüzü oluşturmak için az sayıda kural gereklidir. Ancak, aşağıdaki yönergeler en iyi uygulama olabilir:

  • Kontrol öğelerinin gösterilmesi için 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ü korumak 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ınmıştır.

Özel Denetimler Çizme

Kontrolü nasıl elde edeceğiniz size kalmış. Genel olarak, kontrolünüzü tek bir öğe olarak değiştirebilmeniz 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 için CSS ve DOM yapısı konusunda biraz bilgi sahibi olmanız gerekir. Aşağıdaki kod, haritayı Chicago'da ortalanacak şekilde kaydıran bir düğme öğesi oluşturmak için bir işlev göstermektedir.

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

Denetimin faydalı olması için gerçekten bir şey yapması gerekir. Bu kontrolün ne olduğu size kalmış. 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 Yapma

Kontrollerin 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 denetimleri bekletmek için yalnızca bir DIV öğesini kapsayıcı olarak kullanın. Bir DIV öğesini hiçbir zaman etkileşimli kullanıcı arayüzü öğesi olarak kullanmayın.
  • Kullanıcı arayüzü öğesi hakkında bilgi sağlamak için label öğesini, title özelliğini veya uygun olduğu durumlarda 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 özellikte bir google.maps.ControlPosition dizisi var. Node öğesini (genellikle <div>) uygun bir ControlPosition öğesine ekleyerek haritaya özel bir kontrol ekleyebilirsiniz. (Bu konumlar hakkında bilgi için yukarıdaki Konumlandırmayı Kontrol Etme bölümüne bakın.)

Her ControlPosition, söz konusu konumda gösterilen kontrollerin MVCArray kadarını depolar. Sonuç olarak kontroller konuma eklendiğinde veya konumdan kaldırıldığında API, kontrolleri uygun şekilde günceller.

API, denetimleri bir index özelliğinin sırasına göre her bir konuma yerleştirir. Öncelikle, dizini daha düşük olan kontroller yerleştirilir. Örneğin, BOTTOM_RIGHT dizinindeki iki özel denetim bu dizin sırasına göre yerleştirilir ve daha düşük dizin değerleri öncelikli olur. Varsayılan olarak tüm özel kontroller, API varsayılan denetimleri 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 sol tarafına veya telif haklarının sağına yerleştirilemez.

Aşağıdaki kod, yeni bir özel kontrol oluşturur (yapıcısı gösterilmez) ve haritaya TOP_RIGHT konumunda 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 kullanışlı değildir) ve yukarıda gösterilen kalıpları bir araya getirir. Bu kontrol, DOM 'click' etkinliklerine yanıt vermek için haritayı belirli bir varsayılan konuma ortalar:

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 göster

Örneği Deneyin

Kontrollere Durum Ekleme

Kontroller, durumu da depolayabilir. Aşağıdaki örnek daha önce gösterilene benzer ancak bu kontrol, yeni bir ev konumu gösterecek şekilde ayarlanan ek bir "Evi Ayarla" düğmesi içerir. Bunu, bu durumu depolamak ve bu eyalet için alıcı ve ayarlar sağlamak üzere kontrolde bir home_ özelliği 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 göster

Örneği Deneyin