Denetimler

Platform seçin: Android iOS JavaScript

Kontrollere Genel Bakış

Maps JavaScript API aracılığıyla görüntülenen haritalar, kullanıcının harita ile etkileşime girmesine olanak tanıyan kullanıcı arayüzü öğeleri içerir. Bu elementlere kontrol edebilir ve bu denetimlerin varyasyonlarını kabul edersiniz. Alternatif olarak, hiçbir şey yapmadan Maps JavaScript API tüm kontrol davranışlarını yönetir.

Aşağıdaki haritada, Haritalar JavaScript API'si:

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

  • Yakınlaştırma denetimi, "+" işaretini gösteriyor. ve "-" düğmeler yakınlaştırma seviyesini değiştirmek için kullanılır. Bu denetim varsayılan olarak haritanın sağ alt köşesinde görünür.
  • Kamera kontrolü, hem yakınlaştırma özelliğini hem de ve kaydırma kontrollerini içerir ve beta kanalı.
  • Harita Türü denetimi, açılır menüden kullanılabilir. Kullanıcının bir harita türü seçmesine olanak tanıyan yatay düğme çubuğu stili (ROADMAP, SATELLITE, HYBRID veya TERRAIN) tıklayın. Bu kontrol, varsayılan olarak sol üstte görünür köşesindeki kartı tıklayın.
  • Street View kontrolü, Street View'u etkinleştirmek için haritaya sürüklenebilecek bir Pegman simgesi içerir. Bu denetim varsayılan olarak haritanın sağ alt kısmında görünür.
  • Yönlendirme kontrolü, eğik görüntüler içeren haritalar için eğilme ve döndürme seçeneklerinin bir kombinasyonunu sunar. Bu denetim, varsayılan olarak haritanın sağ alt kısmına yakın bir yerde görünür. Daha fazla bilgi için 45° görüntüler konusuna bakın.
  • Ölçek denetimi bir harita ölçeği öğesi görüntüler. Bu denetim, varsayılan olarak devre dışıdır.
  • Tam ekran kontrolü, içerikleri açma seçeneği sunar. görüntüleyebilirsiniz. Bu denetim, masaüstü ve mobil cihazlarda varsayılan olarak etkindir. Not: iOS, tam ekran özelliğini desteklemez. Bu nedenle, tam ekran kontrolü iOS cihazlarda görünmez.
  • Klavye kısayolları denetimi, harita ile etkileşim kurmak için kullanılabilen klavye kısayollarının listesini gösterir.

Bu harita denetimlerine doğrudan erişmez veya bunları değiştirmezsiniz. Bunun yerine haritanın görünürlüğü etkileyen MapOptions alanlarını değiştirme ve kontrollerin sunumudur. Kontrol sunusunu ayarlayabilirsiniz. haritanızı örneklendirmek (uygun MapOptions ile) veya haritayı değiştirmek için setOptions() çağırarak dinamik bir şekilde harita oluşturun seçenekleri vardır.

Bu denetimlerin tümü varsayılan olarak etkin değildir. Varsayılan kullanıcı arayüzü davranışı (ve bu davranışın nasıl değiştirileceği) hakkında bilgi edinmek için aşağıdaki Varsayılan kullanıcı arayüzü bölümüne bakın.

Varsayılan kullanıcı arayüzü

Harita çok küçükse (200x200 piksel) varsayılan olarak tüm denetimler kaybolur. Kontrolü açık bir şekilde görünür. Haritaya kontrol ekleme başlıklı makaleyi inceleyin.

Kontrollerin davranışı ve görünümü, tam ekran kontrolü hariç olmak üzere mobil ve masaüstü cihazlarda aynıdır (kontrol listesi bölümünde açıklanan davranışa bakın).

Ayrıca, klavye kullanımı tüm cihazlarda varsayılan olarak açıktır.

Varsayılan kullanıcı arayüzünü devre dışı bırakma

API'nin varsayılan kullanıcı arayüzü düğmelerini tamamen kapatabilirsiniz. Bunun için, haritanın disableDefaultUI özelliğini ( MapOptions nesnesi) true konumuna getirin. Bu özellik, Maps JavaScript API'deki tüm kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Ancak bu, ana haritadaki fare hareketlerini veya gestureHandling ve keyboardShortcuts özellikleri tarafından kontrol edilen klavye kısayollarını etkilemez.

Aşağıdaki kod, kullanıcı arayüzü düğmelerini devre dışı bırakır:

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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örüntüleyin

Örneği Deneyin

Haritaya Denetimler Ekleme

Kullanıcı arayüzünü kaldırarak, ekleyerek veya değiştirerek arayüzünüzü uyarlamak isteyebilirsiniz. değiştirmemesini sağlamalı ve gelecekteki güncellemelerin bu durumu gösterir. Yalnızca mevcut davranışı eklemek veya mevcut davranışı değiştirmek istiyorsanız kontrolün uygulamanıza açıkça eklendiğinden emin olun.

Bazı denetimler haritada varsayılan olarak görünür, bazıları ise görünmez izin verilmez. haritası aşağıdaki MapOptions nesnesinde belirtildi: görünür yapmak için true olarak ayarladığınız veya Gizlemek için false:

{
  zoomControl: boolean,
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Harita 200x200 pikselden küçükse varsayılan olarak tüm denetimler kaybolur. Kontrolü açıkça görünür olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Örneğin, aşağıdaki tabloda harita boyutuna ve zoomControl alanının ayarına göre yakınlaştırma kontrolünün görünür olup olmadığı gösterilmektedir:

Harita boyutu zoomControl Görünüyor mu?
Tümü false Hayır
Tümü true Evet
>= 200x200 piksel undefined Evet
< 200x200 piksel undefined Hayır

Aşağıdaki örnek, haritayı Yakınlaştırma özelliğini gizleyecek şekilde ve Ölçek kontrolünü görüntüleyin. Lütfen açıkça belirtmediğimizi Varsayılan kullanıcı arayüzünü devre dışı bırakın, böylece bu değişiklikler varsayılan kullanıcı arayüzüne eklemelidir gösterir.

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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örüntüleyin

Örneği Deneyin

Kontrol Seçenekleri

Çeşitli denetim seçenekleri yapılandırılabilir. Bu denetimler, davranışını veya davranışını değiştirmenize ya da nasıl değiştireceğinizi öğreneceğiz. Örneğin, Harita Türü kontrolü yatay çubuk veya açılır menü olarak görünebilir.

Bu kontroller, harita oluşturulduktan sonra MapOptions nesnesinde uygun denetim seçenekleri alanları değiştirilerek değiştirilir.

Örneğin, Harita Türü denetimini değiştirme seçenekleri mapTypeControlOptions alanı boş bırakılamaz. Harita Türü denetimi, aşağıdaki style seçeneklerinden biri:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR, kontrol dizisini Google Haritalar'da gösterildiği gibi yatay bir çubukta düğmeler olarak gösterir.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU, ekranda açılır menü kullanarak harita türünü seçmenize olanak tanıyan tek düğmeli kontrol tıklayın.
  • google.maps.MapTypeControlStyle.DEFAULT, ekran boyutuna bağlı olan ve gelecekte değişebilen varsayılan davranış sürümleri bulunuyor.

Herhangi bir kontrol seçeneğini değiştirirseniz uygun MapOptions değerini true olarak ayarlayarak kontrolü de açıkça etkinleştirmeniz gerektiğini unutmayın. Örneğin, bir Harita Türü denetimini DROPDOWN_MENU stilini sergileyecek şekilde ayarlamak için MapOptions nesnesinde aşağıdaki kodu kullanın:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

Aşağıdaki örnekte, denetimlerin varsayılan konumunun ve stilinin nasıl değiştirileceği gösterilmektedir.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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örüntüleyin

Ö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ılan zoomControlOptions alanı ayrıca ZoomControlOptions bu kontrol için kullanılacak.
  • cameraControl kamera denetimini etkinleştirir/devre dışı bırakır. Bu denetim, beta kanalı. cameraControlOptions alanı, bu denetim için kullanılacak CameraControlOptions değerini de belirtir.
  • mapTypeControl, kullanıcının harita türleri (ör. Harita ve Uydu) arasında geçiş yapmasına olanak tanıyan Harita Türü kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim görünür ve sol üstte görünür köşesindeki kartı tıklayın. mapTypeControlOptions alanı ek olarak MapTypeControlOptions bu kontrol için kullanılacak.
  • streetViewControl, kullanıcının Street View panoramasını etkinleştirmesine olanak tanıyan Pegman kontrolünü etkinleştirir/devre dışı bırakır. Bu denetim, varsayılan olarak görünür ve sağ alt tarafa yakın bir yerdedir görebilirsiniz. streetViewControlOptions alanı, bu denetim için kullanılacak StreetViewControlOptions değerini de belirtir.
  • rotateControl, 45° görüntünün yönünü kontrol etmek için Döndür denetiminin görünürlüğünü etkinleştirir/devre dışı bırakır. Ölçüt kontrolün varlığı, varsayılan olarak kontrolün varlığına veya belirli bir harita türü için mevcut yakınlaştırma ve 45°'lik konum. Haritanın belirlemek için rotateControlOptions RotateControlOptions tıklayın. 45° görüntü yoksa kontrolü gösteremezsiniz.
  • scaleControl, harita ölçeği sağlayan Ölçek kontrolünü etkinleştirir/devre dışı bırakır. Bu denetim varsayılan olarak görünmez. Zaman etkinleştirdiğinizde, her zaman haritanın sağ alt köşesinde görünür. scaleControlOptions, bu denetim için kullanılacak ScaleControlOptions değerini de belirtir.
  • fullscreenControl, açılan denetimi etkinleştirir/devre dışı bırakır görüntüleyebilirsiniz. Varsayılan olarak, bu kontrol etkindir. en iyi uygulamaları paylaşacağız. Etkinleştirildiğinde kontrol, haritanın sağ üst kısmına yakın bir yerde görünür. İlgili içeriği oluşturmak için kullanılan fullscreenControlOptions, ayrıca FullscreenControlOptions bu kontrol için kullanılacak.

İlk başta devre dışı bıraktığınız kontroller için seçenekler belirleyebileceğinizi unutmayın.

Konumlandırmayı kontrol etme

Kontrol seçeneklerinin çoğu, kontrolün haritada nereye yerleştirileceğini belirten bir position mülkü (ControlPosition türü) içerir. Bu denetimlerin konumu mutlak değildir. Bunun yerine API, kontrollerin etrafta gezinerek akıllı bir şekilde yerleşmesini sağlar. mevcut harita öğelerini veya diğer kontrolleri, verilen kısıtlamalar dahilinde (örneğin, boyut) de ekleyebilirsiniz.

Not: Google Ads'in belirli bir kullanıcıya karmaşık düzenler nedeniyle kontroller çakışmayabilir. Ancak API, bunları akıllıca düzenlemeye çalışın.

Aşağıdaki kontrol konumları desteklenir:

  • TOP_CENTER, denetimin haritanın üst ortasına yerleştirilmesi gerektiğini gösterir.
  • TOP_LEFT, kontrolün haritanın sol üst kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise üst ortayı "izlediğini" gösterir.
  • TOP_RIGHT, kontrolün yanına yerleştirilmesi gerektiğini gösterir "akan" denetiminin tüm alt öğeleriyle birlikte haritanın sağ üst köşesinde orta üst kısma doğru.
  • LEFT_TOP, kontrolün yanına yerleştirilmesi gerektiğini gösterir sol üst tarafta, ancak herhangi bir TOP_LEFT öğesinin altında.
  • RIGHT_TOP, denetimin haritanın sağ üst kısmına, ancak TOP_RIGHT öğelerinin altına yerleştirilmesi gerektiğini gösterir.
  • LEFT_CENTER, kontrolün haritanın sol tarafına, TOP_LEFT ve BOTTOM_LEFT konumları arasında ortalanmak üzere yerleştirilmesi gerektiğini belirtir.
  • RIGHT_CENTER, kontrolün yerleştirilmesi gerektiğini gösterir haritanın sağ tarafı boyunca, TOP_RIGHT ve BOTTOM_RIGHT konumları.
  • LEFT_BOTTOM, denetimin haritanın sol alt kısmına, ancak BOTTOM_LEFT öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.
  • RIGHT_BOTTOM, kontrolün haritanın sağ alt kısmına, ancak BOTTOM_RIGHT öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.
  • BOTTOM_CENTER, denetimin haritanın alt ortasına yerleştirilmesi gerektiğini gösterir.
  • BOTTOM_LEFT, kontrolün haritanın sol alt kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise alt ortağa doğru "aktığını" gösterir.
  • BOTTOM_RIGHT, kontrolün yerleştirilmesi gerektiğini gösterir kontrol öğesinin alt öğeleriyle birlikte sayfanın sağ alt köşesinde "akan" alt merkeze doğru.

Bu konumların, yerleşimlerini değiştiremediğiniz kullanıcı arayüzü öğelerinin (ör. telif hakkı ve Google logosu) konumlarıyla aynı olabileceğini unutmayın. Bu durumlarda kontroller, her konum için belirtilen mantığa göre akacak ve belirtilen konumlarına mümkün olduğunca yakın görünecektir.

Aşağıdaki örnekte, farklı konumlar.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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örüntüleyin

Örneği Deneyin

Özel Denetimler

Mevcut API denetimlerinin stilini ve konumunu değiştirmenin yanı sıra kullanıcıyla etkileşimi yönetmek için kendi denetimlerinizi de oluşturabilirsiniz. Denetimler bir haritanın üzerinde mutlak konumlarda yüzen sabit widget'lar temel haritayla birlikte hareket eden yer paylaşımları yerine. Daha temel bir ifadeyle, kontrol, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzü görüntüleyen ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı veya harita ile etkileşimi yöneten bir <div> öğesidir.

Kendi özel denetiminizi oluşturmak için birkaç kural gereklidir. Ancak şu kurallar en iyi uygulama olarak işlev görebilir:

  • Kontrol öğelerinin gösterileceği uygun CSS'yi tanımlayın.
  • Etkinlik işleyiciler aracılığıyla kullanıcı veya harita ile etkileşimi harita özelliği değişiklikleri veya kullanıcı etkinlikleri (örneğin, 'click' etkinlik).
  • Kontrolü tutmak için bir <div> öğesi oluşturun ve bu öğeyi Map öğesinin controls özelliğine ekler.

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

Özel Denetimler Çizim

Kontrol panelinizi nasıl çizeceğiniz size bağlıdır. Genel olarak, tüm kontrol sunumunuzu tek bir çatı altında <div> öğesi kullanarak kontrolünüzü bir adet. Bu tasarım kalıbını aşağıda gösterilen örneklerde kullanacağız.

İlgi çekici kontroller tasarlamak için biraz CSS ve DOM bilgisi gerekir. inceleyeceğiz. Aşağıdaki kodda, haritayı Chicago'ya odaklanacak şekilde kaydıran bir düğme öğesi oluşturma işlevi gösterilmektedir.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

Özel Denetimlerden Gelen Etkinlikleri Yönetme

Bir kontrolün yararlı olması için gerçekten bir şey yapması gerekir. Kontrolün işleyiş şekli size bağlıdır. Kontrol, kullanıcı girişlerine yanıt verebilir veya Map öğesinin durumundaki değişikliklere.

Kullanıcı girişine yanıt vermek için addEventListener() öğesini kullanın. Bu öğe, desteklenen DOM etkinliklerini işler. İlgili içeriği oluşturmak için kullanılan Aşağıdaki kod snippet'i, tarayıcının 'click' öğesi için bir işleyici ekler. unutmayın. Bu etkinliğin haritadan değil, DOM'den alındığını unutmayın.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Özel Denetimleri Erişilebilir Hale Getirme

Denetimlerin klavye etkinliklerini aldığından ve ekran okuyuculara doğru şekilde göründüğünden emin olmak için:

  • Düğmeler, form öğeleri ve etiketler için her zaman yerel HTML öğelerini kullanın. DIV öğesini yalnızca yerel denetimleri barındıran bir kapsayıcı olarak kullanın. DIV öğesini hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak yeniden amaçlamayın.
  • label öğesini, title özelliğini veya aria-label özelliğini kullanın özelliğini kullanın.

Konumlandırma Özel Kontrolleri

Özel kontroller, Map nesnesinin controls özelliğindeki uygun konumlara yerleştirilerek haritada konumlandırılır. Bu mülk bir google.maps.ControlPosition dizisi içerir. Uygun bir ControlPosition'ye Node (genellikle <div>) ekleyerek haritaya özel bir denetim eklersiniz. (Bu programlar hakkında Konumlandırmayı Kontrol Etme bölümüne bakın above.)

Her ControlPosition, bir MVCArray kontrollerinin olması gerekir. Bu nedenle, kontroller eklendiğinde veya kaldırılırsa API, denetimleri uygun şekilde günceller.

API, denetimleri her konuma bir index mülkünün sırasına göre yerleştirir. Daha düşük dizinli denetimler önce yerleştirilir. Örneğin, BOTTOM_RIGHT konumundaki iki özel kontrol, bu endeks sırasına göre düzenlenir ve daha düşük indeks değerleri önceliklendirme. Varsayılan olarak tüm özel denetimler, resim yerleştirildikten sonra tüm API varsayılan denetimlerine dokunun. Bir denetimin index mülkünü negatif bir değere ayarlayarak bu davranışı geçersiz kılabilirsiniz. Özel kontroller logonun soluna veya sağına yerleştirilemez. telif hakları.

Aşağıdaki kod yeni bir özel denetim oluşturur (bunun kurucusu gösterilir) ve bunu haritaya TOP_RIGHT konumuna ekler.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Özel Denetleyici Örneği

Aşağıdaki denetim basittir (ancak özellikle faydalı değildir) ve yukarıda gösterilen kalıpları birleştiriyor. Bu kontrol, DOM'ye yanıt verir Haritayı belirli bir varsayılan değerde ortalayarak 'click' etkinlik konum:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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österilen örneğe benzer ancak kontrol, kontrolü yeni bir ev konumu gösterecek şekilde ayarlayan ek bir "Evi Ayarla" düğmesi içerir. Bunu, Bu durumu depolamak için kontrol altında home_ özelliği ve eyaletin belirleyicileri ve belirleyicileri sağlamak.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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örüntüleyin

Örneği Deneyin