Denetimler

Platform seçin: Android iOS JavaScript

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.
  • Harita Türü denetimi açılır menüde bulunur. Kullanıcının bir harita türü seçmesine olanak tanıyan yatay düğme çubuğu stili (ROADMAP, SATELLITE, HYBRID veya TERRAIN) 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 oluşturmak 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ırakma

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;
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

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ürken bazıları 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,
  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 harita üzerindeki 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. Burada 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;
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 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, menü, 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 liste aracılığıyla 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ği 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;
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. 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ştirme

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ılan zoomControlOptions alanı ayrıca Bu kontrol için kullanılacak ZoomControlOptions.
  • 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 olarak MapTypeControlOptions bu kontrol için geçerli.
  • 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 olarak StreetViewControlOptions bu kontrol için geçerli.
  • 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çin rotateControlOptions Kullanılacak RotateControlOptions. kontrolü görünür.
  • scaleControl, aşağıdakileri yapan Ölçek denetimini etkinleştirir/devre dışı bırakır basit bir harita ölçeği sunar. 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ılan scaleControlOptions, ayrıca Bu kontrol için kullanılacak ScaleControlOptions.
  • 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ılan fullscreenControlOptions, ayrıca Bu kontrol için kullanılacak FullscreenControlOptions.

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: 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, 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 bir TOP_LEFT öğesinin altında.
  • RIGHT_TOP, kontrolün yanına yerleştirilmesi gerektiğini gösterir haritanın sağ üst köşesinde, herhangi bir TOP_RIGHT altında öğeler.
  • LEFT_CENTER, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sol tarafında, TOP_LEFT şeklinde ortalanmış ve BOTTOM_LEFT konum.
  • RIGHT_CENTER, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sağ tarafı boyunca, TOP_RIGHT ve BOTTOM_RIGHT konumları.
  • LEFT_BOTTOM, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sol alt köşesinde, herhangi bir BOTTOM_LEFT üzerinde öğeler.
  • RIGHT_BOTTOM, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sağ alt kısmında, herhangi bir BOTTOM_RIGHT öğesinin üzerinde öğeler.
  • 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;
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ş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 öğeyi Map öğesinin controls özelliğine ekler.

Bu endişelerin her biri aşağıda ele alınmaktadır.

Özel Denetimler Çizme

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şturmaya yönelik bir işlev gösterilmektedir merkezi olarak Chicago'nun merkezine kaydıran bir şablondur.

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 veya aria-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;
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 saklayabilir. 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 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;
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