Güvenlik uyarısı: Belirli üçüncü taraf kitaplıkları (polyfill.io dahil) kullanan web sitelerini etkileyebilecek bir güvenlik sorununun olduğunu tespit ettik. Bu sorun bazen, web sitesi sahibinin bilgisi veya izni olmadan ziyaretçileri istenen web sitesinden başka yere yönlendirebilir. JavaScript örneklerimizin çoğu önceden bir polyfill.io komut dosyası beyanı içeriyordu. Bunu örneklerimizden kaldırdık. Bu bildirimi içeren JavaScript örneklerimizi kullandıysanız beyanı kaldırmanızı öneririz.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Harita Türleri

Platform seçin: Android iOS JavaScript

Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri açıklanmaktadır. API, bu haritalar hakkındaki bilgileri saklamak için bir MapType nesnesi kullanır. MapType, harita parçalarının görüntülenmesini ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) dönüştürülmesini tanımlayan bir arayüzdür. Her MapType, kartların alınması ve serbest bırakılması için birkaç yöntem ile bunların görsel davranışını tanımlayan özellikler içermelidir.

Maps JavaScript API'deki harita türlerinin iç işleyişi daha ileri bir konudur. Çoğu geliştirici, aşağıda belirtilen temel harita türlerini kullanabilir. Bununla birlikte, Stilli Haritalar'ı kullanarak mevcut harita türlerinin sunumunu değiştirebilir veya özel harita türlerini kullanarak kendi harita desenlerinizi tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kaydı'nı nasıl değiştireceğinizi anlamanız gerekir.

Temel Harita Türleri

Maps JavaScript API'de dört tür harita bulunur. Maps JavaScript API, bilindik "boyalı" yol haritası karolarına ek olarak diğer harita türlerini de destekler.

Maps JavaScript API'de aşağıdaki harita türleri kullanılabilir:

roadmap, varsayılan yol haritası görünümünü gösterir. Bu, varsayılan harita türüdür.
satellite, Google Earth uydu görüntülerini gösterir.
hybrid, normal görünüm ile uydu görünümlerini karışık olarak gösterir.
terrain, arazi bilgilerine dayalı fiziksel bir harita gösterir.

Map tarafından kullanılan harita türünü, mapTypeId özelliğini ayarlayarak Map options nesnesini ayarlayarak veya haritanın setMapTypeId() yöntemini çağırarak değiştirirsiniz. mapTypeID özelliği varsayılan olarak roadmap değerine ayarlanır.

İnşaat sırasında mapTypeId ayarlanıyor:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

mapTypeId öğesini dinamik olarak değiştirme:

map.setMapTypeId('terrain');

Haritanın harita türünü doğrudan ayarlamadığınızı, bunun yerine mapTypeId değerini bir tanımlayıcı kullanarak MapType öğesine referans verecek şekilde ayarladığınızı unutmayın. Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan harita türü kayıt defterinden yararlanır.

45° görüntüler

Maps JavaScript API, belirli konumlar için 45° özel görüntüleri destekler. Bu yüksek çözünürlüklü görüntüler, ana yönlerin her birine (Kuzey, Güney, Doğu, Batı) doğru perspektif görünümleri sağlar. Bu resimler, desteklenen harita türleri için daha yüksek yakınlaştırma düzeylerinde kullanılabilir.

Aşağıdaki resimde, New York'un 45° perspektif görünümü gösterilmektedir:

satellite ve hybrid harita türleri, mümkün olduğunda yüksek yakınlaştırma düzeylerinde (12 ve üzeri) 45° görüntüleri destekler. Kullanıcı bu tür görüntülerin bulunduğu bir konumu yakınlaştırırsa, bu harita türleri görünümleri otomatik olarak aşağıdaki şekilde değiştirir:

Uydu veya karma görüntüler yerine, geçerli konum merkeze alınmış 45° bakış açısı sağlayan görüntüler kullanılır. Varsayılan olarak, bu tür görünümler kuzeye doğrudur. Kullanıcı görüntüyü uzaklaştırırsa varsayılan uydu veya karma görüntüler tekrar görünür. Bu davranış, yakınlaştırma seviyesine ve tilt değerine bağlı olarak değişiklik gösterir:

tilt 45 olarak ayarlanmadığı sürece, 12 ile 18 arasındaki yakınlaştırma seviyeleri arasında varsayılan olarak yukarıdan aşağıya temel harita (0°) gösterilir.
18 veya daha yüksek yakınlaştırma düzeylerinde, tilt 0'a ayarlanmadığı sürece 45° temel harita gösterilir.

Döndürme denetimi görünür hale gelir. Döndürme denetimi, kullanıcının yatırmayı değiştirebilmesini ve görünümü her iki yönde de 90°'lik artışlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için rotateControl değerini false olarak ayarlayın.

45° görüntüler görüntüleyen bir harita türünden uzaklaştırma yapmak bu değişikliklerin her birini geri alarak orijinal harita türlerini yeniden oluşturur.

45° Görüntüleri Etkinleştirme ve Devre Dışı Bırakma

45° görüntüleri, Map nesnesi için setTilt(0) çağırarak devre dışı bırakabilirsiniz. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için setTilt(45) numaralı telefonu arayın. Map işlevinin getTilt() yöntemi her zaman, haritada gösterilen geçerli tilt öğesini yansıtır. Haritada bir tilt öğesini ayarlar ve daha sonra bu tilt öğesini kaldırırsanız (örneğin, haritayı uzaklaştırarak) haritanın getTilt() yöntemi 0 sonucunu döndürür.

Önemli: 45° görüntüler yalnızca kafes haritalarda desteklenir; bu görüntüler vektör haritalarıyla kullanılamaz.

Aşağıdaki örnekte New York şehrinin 45° görünümü gösterilmektedir:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Örneği görüntüleyin.

45° Görüntüleri Döndürme

45°'lik görüntüler, aslında her bir kardina yön (Kuzey, Güney, Doğu, Batı) için bir görüntü koleksiyonundan oluşur. Haritanız 45° görüntüler gösterdiğinde, Map nesnesi için setHeading() yöntemini çağırarak, kuzeyden derece olarak ifade edilen bir sayı değerini ileterek görüntüleri kardinal yönlerinden birine doğru yönlendirebilirsiniz.

Aşağıdaki örnekte bir hava haritası gösterilmektedir ve düğme tıklandığında haritayı her 3 saniyede bir otomatik olarak döndürür:

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });

  // add listener to button
  document.getElementById("rotate")!.addEventListener("click", autoRotate);
}

function rotate90(): void {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate(): void {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });
  // add listener to button
  document.getElementById("rotate").addEventListener("click", autoRotate);
}

function rotate90() {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Örneği görüntüleyin.

Harita Türü Kaydını Değiştirme

Bir haritanın mapTypeId özelliği, MapType öğesini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map nesnesi, söz konusu harita için kullanılabilir MapType koleksiyonunu içeren bir MapTypeRegistry sağlar. Bu kayıt otoritesi, örneğin MapType kontrolünde bulunan harita türlerini seçmek için kullanılır.

Doğrudan harita türü kaydından okuma yapmazsınız. Bunun yerine, özel eşleme türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısıyla ilişkilendirerek kayıt defterini değiştirebilirsiniz. Temel harita türlerini değiştiremez veya değiştiremezsiniz (ancak haritayla ilişkilendirilmiş mapTypeControlOptions görünümünün görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).

Aşağıdaki kod, haritayı, haritanın mapTypeControlOptions öğesinde yalnızca iki harita türünü gösterecek şekilde ayarlar ve MapType arayüzünün gerçek uygulamasına bu tanımlayıcıyla ilişkilendirmeyi eklemek için kayıt defterini değiştirir.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

Stilli Haritalar

StyledMapType, standart Google temel haritalarının sunumunu özelleştirmenize olanak tanır. Böylece, yol, park ve yerleşim alanı gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stili yansıtacak şekilde değiştirebilirsiniz.

StyledMapType hakkında daha fazla bilgi edinmek için stili haritalar rehberine bakın.

Özel Harita Türleri

Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekleyerek kendi harita görüntülerinizi veya karo yer paylaşımlarınızı uygulamanıza olanak tanır.

Maps JavaScript API'de birkaç olası harita türü uygulaması bulunur:

Toplu olarak tam kartografik haritaları oluşturan resimlerden oluşan standart karo kümeleri. Bu parçalı kümeler, temel harita türleri olarak da bilinir. Bu harita türleri, mevcut varsayılan harita türleri gibi davranır ve davranır: roadmap, satellite, hybrid ve terrain. Maps JavaScript API'deki kullanıcı arayüzünün, özel harita türünüzü standart bir harita türü olarak işlemesini sağlamak için (örneğin, MapType kontrolüne ekleyerek) özel harita türünüzü bir Haritalar mapTypes dizisine ekleyebilirsiniz.
Mevcut temel harita türlerinin üzerinde görüntülenen resim parçası yer paylaşımları. Genel olarak bu harita türleri, ek bilgiler görüntülemek üzere mevcut bir harita türünü genişletmek için kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma seviyeleriyle sınırlandırılır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
Harita bilgilerinin görünümünü en temel düzeyde değiştirmenize olanak tanıyan, resim olmayan harita türleri.

Bu seçeneklerin her biri, MapType arayüzünü uygulayan bir sınıf oluşturmaya bağlıdır. Ayrıca ImageMapType sınıfı, görüntü haritası türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar da sağlar.

`MapType` Arayüzü

MapType uygulayan sınıflar oluşturmadan önce, Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerinin gösterileceğine nasıl karar verdiğini anlamanız önemlidir. Tüm temel veya yer paylaşımlı harita türleri için benzer bir mantık uygulamanız gerekir. Harita ve parça koordinatları ile ilgili kılavuzu okuyun.

Özel harita türleri, MapType arayüzünü uygulamalıdır. Bu arayüz, API, harita karolarını geçerli görüntü alanı ve yakınlaştırma düzeyinde görüntülemesi gerektiğini belirlediğinde, API'nin harita türlerinize istek başlatmasını sağlayan belirli özellikleri ve yöntemleri belirtir. Hangi karonun yükleneceğine karar vermek için bu istekleri siz yerine getirirsiniz.

Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu görüntüleriniz varsa zaten bu arayüzü uygulayan ImageMapType sınıfını kullanabilirsiniz.

MapType arayüzünü uygulayan sınıflar aşağıdaki özellikleri tanımlamanızı ve doldurmanızı gerektirir:

tileSize (zorunlu), google.maps.Size türünde karonun boyutunu belirtir. Boyutlar dikdörtgen olmalı ancak kare olmamalıdır.
maxZoom (gerekli), bu harita türündeki parçaların gösterileceği maksimum yakınlaştırma düzeyini belirtir.
minZoom (isteğe bağlı), bu harita türündeki parçanın görüntüleneceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer, minimum yakınlaştırma seviyesinin olmadığını gösteren 0 şeklindedir.
name (isteğe bağlı) bu harita türünün adını belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (Aşağıdaki MapType Denetimleri Ekleme bölümüne bakın.)
alt (isteğe bağlı), bu harita türü için fareyle üzerine gelinen metin olarak gösterilen alternatif metni belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolü içinde seçilebilir olmasını istiyorsanız gereklidir. (Aşağıdaki MapType Denetimleri Ekleme konusuna bakın.)

Ayrıca, MapType arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:

API, haritanın belirli bir görüntü alanı için yeni parçalar görüntülemesi gerektiğini belirlediğinde getTile() (zorunlu) çağrılır. getTile() yöntemi aşağıdaki imzaya sahip olmalıdır:

getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

API; MapType öğesinin tileSize, minZoom ve maxZoom özelliklerinin yanı sıra haritanın mevcut görüntü alanı ve yakınlaştırma düzeyine göre getTile() öğesini çağırması gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, iletilen koordinat, yakınlaştırma seviyesi ve parça resminin ekleneceği DOM öğesine sahip bir HTML öğesi döndürmelidir.
API, haritanın görünümden düştüğünde bir karoyu kaldırması gerektiğini belirlediğinde, releaseTile() (isteğe bağlı) çağrılır. Bu yöntem aşağıdaki imzaya sahip olmalıdır:

releaseTile(tile:Node)

Normalde, haritaya eklendikten sonra harita parçalarına eklenmiş tüm öğeleri kaldırmanız gerekir. Örneğin, harita bölümü yer paylaşımlarına etkinlik işleyiciler eklediyseniz bunları buradan kaldırmanız gerekir.

getTile() yöntemi, belirli bir görüntü alanında hangi karoların yükleneceğini belirlemede ana denetleyici görevi görür.

Temel Harita Türleri

Bu şekilde oluşturduğunuz harita türleri tek başına ya da bindirme olarak diğer harita türleriyle birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu tür özel MapType'leri mevcut diğer temel harita türlerinde (ROADMAP, TERRAIN vb.) olduğu gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType öğenizi Map mapTypes özelliğine ekleyin. Bu özellik MapTypeRegistry türünde.

Aşağıdaki kod, haritanın karo koordinatlarını görüntülemek için temel MapType oluşturur ve karoların ana hatlarını çizer:

TypeScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256)),
  );
}

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Bindirme Harita Türleri

Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür harita türlerinde önemli yerleri gösteren veya kullanıcıya ek veriler gösteren şeffaf katmanlar bulunabilir.

Böyle durumlarda, harita türünün ayrı bir öğe yerine bir yer paylaşımı olarak ele alınmasını istersiniz. Bunu, harita türünü doğrudan Map overlayMapTypes özelliğini kullanıp mevcut bir MapType öğesine ekleyerek yapabilirsiniz. Bu özellikte MVCArray/MapType yer alıyor. Tüm harita türleri (ana ve yer paylaşımı) mapPane katmanında oluşturulur. Bindirme haritası türleri, bağlı oldukları temel haritanın üstünde, Map.overlayMapTypes dizisinde göründükleri sırayla gösterilir (daha yüksek dizin değerlerine sahip yer paylaşımları, daha düşük dizin değerlerine sahip yer paylaşımlarının önünde gösterilir).

Aşağıdaki örnek, ROADMAP harita türünün üzerinde bir karo yer paylaşımı MapType oluşturmamız dışında önceki örnekle aynıdır:

TypeScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Resim Haritası Türleri

Temel harita türü olarak kullanmak için MapType uygulamak zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri (tek resim dosyalarından oluşan karolardan oluşan harita türleri) için MapType arayüzünü uygulayan özel bir sınıf sağlar.

Bu sınıf (ImageMapType), aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions nesne spesifikasyonu kullanılarak oluşturulur:

tileSize (zorunlu), google.maps.Size türünde karonun boyutunu belirtir. Boyutlar dikdörtgen olmalı ancak kare olmamalıdır.
getTileUrl (gerekli), sağlanan dünya koordinatlarına ve yakınlaştırma seviyesine göre uygun resim karosunun seçimini işlemek için genellikle satır içi işlev sabit değeri olarak sağlanan işlevi belirtir.

Aşağıdaki kod, Google'ın ay karolarını kullanarak temel bir ImageMapType uygular. Örnekte, blokların x ekseni boyunca tekrarlandığından, haritanızın y ekseninde yapmadığından emin olmak için bir normalleştirme işlevi kullanılmaktadır.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Tahminler

Dünya üç boyutlu bir küre (yaklaşık olarak), harita ise düz bir iki boyutlu yüzeydir. Maps JavaScript API'de gördüğünüz harita, Dünya'nın herhangi bir düz haritası gibi, söz konusu kürenin düz bir yüzeye projeksiyonudur. En basit haliyle projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatların eşleştirilmesi olarak tanımlanabilir.

Maps JavaScript API'deki projeksiyonlar Projection arayüzünü uygulamalıdır. Projection uygulaması yalnızca bir koordinat sisteminden diğerine eşleme değil, çift yönlü eşleme de sağlamalıdır. Yani, Earth koordinatlarından (LatLng nesne) Projection sınıfının dünya koordinatı sistemine (veya tam tersi) nasıl çeviri yapılacağını tanımlamanız gerekir. Google Haritalar, coğrafi verilerden harita oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu projeksiyonu, Map üzerinde (veya standart taban MapType türlerinden herhangi birinde) getProjection() yöntemini çağırarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.

Projeksiyon Uygulama

Özel projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:

Enlem ve boylam koordinatlarının Kartezyen düzlemde (veya tam tersi) eşlenmesine ilişkin formül. (Projection arayüzü yalnızca doğrusal koordinatlara dönüşümleri destekler.)
Taban karo boyutu. Tüm karolar dikdörtgen olmalıdır.
Yakınlaştırma düzeyi 0'a ayarlanmış taban parçanın kullanıldığı bir haritanın "dünya boyutu". Yakınlaştırma seviyesi 0 olan tek parçadan oluşan haritalar için dünya ve taban karo boyutunun aynı olduğunu unutmayın.

Projeksiyonlarda Dönüşümleri Koordine Etme

Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sunarak coğrafi ve dünya koordinatları arasında dönüştürme yapmanızı sağlar:

Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, harita üzerindeki bindirmeleri konumlandırmak (ve haritanın kendisini konumlandırmak) için kullanılır.
Projection.fromPointToLatLng() yöntemi, bir dünya koordinatını LatLng değerine dönüştürür. Bu yöntem, haritada gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlara dönüştürmek için kullanılır.

Google Haritalar projeksiyonların doğrusal olduğunu varsayar.

Projeksiyonu genellikle iki durum için kullanabilirsiniz: dünya haritası oluşturmak veya yerel bir bölgenin haritasını oluşturmak. Aynı durumda, projeksiyonunuzun tüm boylamlarda da doğrusal ve normal olduğundan emin olmalısınız. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani, kuzeye işaret) olabilir, ancak gerçek kuzeyden sapabilir; örneğin, harita bir referans boylama göre daha ileri bir konuma yerleştirilir. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz, ancak projeksiyonun kesinliksiz olduğunu ve dönüştürme hatalarının görünüşe göre saptığınız referans boylamdan gittikçe uzaklaşacağını unutmayın.

Projeksiyonlarda Harita Parçası Seçimi

Projeksiyonlar yalnızca konumların veya bindirmelerin konumlarını belirlemek için değil, harita parçalarının kendilerini konumlandırmak için de yararlı olur. Maps JavaScript API, temel haritaları bir MapType arayüzü kullanarak oluşturur. Bu arayüzde, haritanın projeksiyonunu tanımlamak için hem projection özelliği hem de harita parçalarını almak için parça koordinatı değerlerine göre getTile() yöntemi belirtilmelidir. Karo koordinatları, hem temel karo boyutuna (dikdörtgen şeklinde olmalıdır) hem de haritanızın "dünya boyutuna" bağlıdır. Bu, harita dünyanızın 0 yakınlaştırma düzeyinde piksel boyutudur. (Yakınlaştırma seviyesi 0 olan tek parçadan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)

Temel karo boyutunu MapType öğenizin tileSize özelliğinde tanımlarsınız. Dünya boyutunu, projeksiyonunuzun fromLatLngToPoint() ve fromPointToLatLng() yöntemlerinde dolaylı olarak tanımlarsınız.

Görüntü seçimi bu iletilen değerlere bağlı olduğundan, map_zoom_tileX_tileY.png gibi aktarılan bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak yararlı olur.

Aşağıdaki örnekte Gall-Peters projeksiyonu kullanılarak bir ImageMapType tanımlanmaktadır:

TypeScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap(): void {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 0,
      center: { lat: 0, lng: 0 },
      mapTypeControl: false,
    }
  );

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng!.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng!.lng());
  });

  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name") as string,
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap,
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;index.js

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Harita Türleri

Temel Harita Türleri

45° görüntüler

45° Görüntüleri Etkinleştirme ve Devre Dışı Bırakma

TypeScript

JavaScript

Örneği Deneyin

45° Görüntüleri Döndürme

TypeScript

JavaScript

Örneği Deneyin

Harita Türü Kaydını Değiştirme

Stilli Haritalar

Özel Harita Türleri

MapType Arayüzü

Temel Harita Türleri

TypeScript

JavaScript

Örneği Deneyin

Bindirme Harita Türleri

TypeScript

JavaScript

Örneği Deneyin

Resim Haritası Türleri

TypeScript

JavaScript

Örneği Deneyin

Tahminler

Projeksiyon Uygulama

Projeksiyonlarda Dönüşümleri Koordine Etme

Projeksiyonlarda Harita Parçası Seçimi

TypeScript

JavaScript

Örneği Deneyin

`MapType` Arayüzü