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

Harita Türleri

Platformu seçin: Android iOS JavaScript

Bu dokümanda, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri açıklanmaktadır. API, bu haritalarla ilgili bilgileri saklamak için bir MapType nesnesi kullanır. MapType, harita parçalarının görüntülenmesi ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) çevirisini tanımlayan bir arayüzdür. Her MapType, parçaların getirilmesini ve yayınlanmasını yönetmek için birkaç yöntem ve görsel davranışını tanımlayan özellikleri içermelidir.

Haritalar JavaScript API'sindeki harita türlerinin iç işleyişi ileri düzey 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 karolarınızı tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kayıt Defteri'ni nasıl değiştireceğinizi anlamanız gerekir.

Temel Harita Türleri

Maps JavaScript API'de dört tür harita bulunur. Haritalar JavaScript API'si, bilinen "boyalı" yol haritası döşemelerinin yanı sıra 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 ve uydu görünümlerinin bir karışımını gösterir.
terrain arazi bilgilerini temel alan fiziksel bir harita gösterir.

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

mapTypeId özelliği yapım sırasında 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 değil, bir MapType özelliğini kullanarak bir MapType öğesini referans alacak şekilde ayarlamanıza dikkat edin.mapTypeId Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan harita türü kayıt defteri kullanır.

45° Görüntüler

Maps JavaScript API, belirli konumlar için özel 45° görüntüleri destekler. Bu yüksek çözünürlüklü görüntüler, kardinal yönün her bir yönüne (Kuzey, Güney, Doğu, Batı) ilişkin perspektif 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 şehrinin 45° perspektif görünümü gösterilmektedir:

satellite ve hybrid harita türleri, mümkün olduğunda yüksek düzeyde (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ümlerini aşağıdaki şekilde otomatik olarak değiştirir:

Uydu veya karma görüntüler, 45° perspektif sağlayan ve mevcut konuma odaklanan görüntülerle değiştiriliyor. Varsayılan olarak, bu tür görünümler kuzeye yöneliktir. Kullanıcı görüntüyü uzaklaştırırsa varsayılan uydu veya karma görüntüler tekrar görüntülenir. Bu davranış, yakınlaştırma düzeyine ve tilt değerine göre değişir:

tilt 45 olarak ayarlanmadığı sürece, yakınlaştırma düzeyi 12 ve 18 arasında, yukarıdan aşağıya doğru (0°) varsayılan olarak görüntülenir.
tilt 0 olarak ayarlanmadığı sürece, 18 veya daha yüksek yakınlaştırma düzeylerinde 45° temel eşleme görüntülenir.

Döndürme kontrolü görünür hale gelir. Döndürme kontrolü, kullanıcının eğmeyi etkinleştirmesine ve görünümü her iki yönde 90°'lik artışlarla döndürmesine olanak tanıyan seçenekler sunar. Döndürme kontrolünü gizlemek için rotateControl özelliğini false olarak ayarlayın.

45° görüntüler içeren bir harita türünün uzaklaştırılmasıyla bu değişikliklerin her biri geri alınır ve orijinal harita türleri yeniden oluşturulur.

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

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

Önemli: 45° görüntüler yalnızca istiridye haritalarında desteklenir. Bu görüntüler, vektör haritaları ile 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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

45° Dönen Görüntüler

45° görüntüler aslında her bir ana yol tarifi için (Kuzey, Güney, Doğu, Batı) bir dizi görüntüden oluşur. Haritanızda 45° görüntüler görüntülenmeye başladıktan sonra, Map nesnesinde setHeading() işlevini çağırarak kuzeyden derece cinsinden bir sayı değeri göndererek görüntüyü ana yönlerinden birine doğru yönlendirebilirsiniz.

Aşağıdaki örnekte havadan alınan bir harita gösterilmektedir ve düğme tıklandığında her 3 saniyede bir haritayı 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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

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

Harita mapTypeId, 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 öğelerinin koleksiyonunu içeren bir MapTypeRegistry içerir. Bu kayıt defteri, örneğin Harita'nın MapType kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.

Doğrudan harita türü kayıt defterinden okumazsınız. Bunun yerine, özel harita türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısıyla ilişkilendirerek kayıt defterini değiştirirsiniz. Temel harita türlerini değiştiremez veya değiştiremezsiniz. Ancak haritayla ilişkili mapTypeControlOptions görünümünü değiştirerek haritadan kaldırabilirsiniz.

Aşağıdaki kod, haritayı haritanın mapTypeControlOptions öğesinde yalnızca iki harita türünü gösterecek şekilde ayarlar ve kayıt otoritesini, bu tanımlayıcıyla ilişkilendirmeyi MapType arayüzünün gerçek uygulamasına ekleyecek şekilde 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 sunulma şeklini özelleştirmenize olanak tanır. Böylece, yollar, parklar ve yerleşik alanlar gibi görsel öğeler, varsayılan harita türünde kullanılandan farklı bir stilde gösterilir.

StyledMapType hakkında daha fazla bilgi için stilli haritalar rehberini inceleyin.

Özel Harita Türleri

Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekler. Böylece, kendi harita görüntülerinizi veya karo bindirmelerinizi uygulayabilirsiniz.

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

Birlikte tam bir haritacılık haritası oluşturan resimlerden oluşan standart fayans grupları. Bu karo kümeleri, temel harita türleri olarak da bilinir. Şu harita türleri mevcut varsayılan harita türleri gibi davranır ve davranır: roadmap, satellite, hybrid ve terrain. Özel harita türünüzü bir Haritalar'ın mapTypes dizisine ekleyerek Haritalar JavaScript API'sindeki kullanıcı arayüzünün, özel harita türünüzü (ör. MapType kontrolüne dahil ederek) standart harita türü olarak değerlendirmesine izin verebilirsiniz.
Resim karosu, mevcut temel harita türlerinin üzerinde görüntülenen yer paylaşımları yapar. Genellikle bu harita türleri, ek bilgi görüntülemek üzere mevcut bir harita türünü genişletmek için kullanılır ve genellikle belirli konumlarla ve/veya yakınlaştırma seviyeleriyle sınırlıdır. Bu kartların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
Harita bilgisi görünümünü en temel düzeyinde değiştirmenize olanak tanıyan, resim dışı 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ü eşleme türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar sağlar.

`MapType` Arayüzü

MapType özelliğini 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 karo koordinatları kılavuzunu okuyun.

Özel harita türleri MapType arayüzünü uygulamalıdır. Bu arayüz, API'nin harita türlerini mevcut 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ına izin veren belirli özellikleri ve yöntemleri belirtir. Hangi talebin yükleneceğine karar vermek için bu istekleri yönetirsiniz.

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

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

tileSize (zorunlu) Kartın boyutunu belirtir (google.maps.Size türünde). Boyutlar kare biçiminde olmasa da dikdörtgen olmalıdır.
maxZoom (gerekli), bu harita türünün karolarının gösterileceği maksimum yakınlaştırma düzeyini belirtir.
minZoom (isteğe bağlı), bu harita türünün karosunu görüntülemek için gereken minimum yakınlaştırma düzeyini belirtir. Bu değer varsayılan olarak minimum yakınlaştırma düzeyi olmadığını belirtir. 0
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ü içinde seçilebilir olmasını istiyorsanız gereklidir. (Aşağıdaki MapType Denetimleri Ekleme bölümüne bakın.)
alt (isteğe bağlı), fareyle üzerine gelme metni olarak gösterilen bu harita türü için 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 denetimlerini ekleme konusuna bakın.)

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

API, haritanın belirli bir görüntü alanı için yeni bloklar görüntülemesi gerektiğini belirlediğinde getTile() (gerekli) olarak çağrılır. getTile() yönteminde aşağıdaki imza bulunmalıdır:

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

API; MapType işlevinin tileSize, minZoom ve maxZoom özelliklerine ve haritanın mevcut görüntü alanına ve yakınlaştırma düzeyine göre getTile() yöntemini çağırması gerekip gerekmediğini belirler. Bu yönteme ait işleyici, kutucuk resminin ekleneceği iletilen koordinat, yakınlaştırma düzeyi ve DOM öğesine sahip bir HTML öğesi döndürmelidir.
releaseTile() (isteğe bağlı), API bir görünümün görüntülememesi durumunda karoyu kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntem aşağıdaki imzaya sahip olmalıdır:

releaseTile(tile:Node)

Genellikle, haritaya ek olarak harita parçalarına eklenen öğeleri de kaldırmalısınız. Örneğin, harita döşemesi yer paylaşımlarına etkinlik işleyiciler eklediyseniz bunları buradan kaldırmalısınız.

getTile() yöntemi, belirli bir görüntü alanı içinde hangi blokların yükleneceğini belirlemek için ana denetleyici işlevi görür.

Temel Harita Türleri

Bu şekilde oluşturduğunuz harita türleri ya bağımsız olabilir ya da yer paylaşımı olarak diğer harita türleriyle birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nın bu özel MapType öğelerini mevcut diğer temel harita türleriyle (ROADMAP, TERRAIN vb.) işlediği şekilde işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType öğenizi Map öğesinin mapTypes özelliğine ekleyin. Bu mülk MapTypeRegistry türündedir.

Aşağıdaki kod, bir haritanın blok koordinatlarını görüntülemek için temel bir MapType oluşturur ve blokları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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io Google Cloud Shell

Yer Paylaşımı 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 belirten veya kullanıcıya ek veriler gösteren şeffaf katmanlar olabilir.

Böyle durumlarda, harita türünün ayrı bir varlık olarak değil, yer paylaşımı olarak değerlendirilmesini istemezsiniz. Bunun için harita türünü doğrudan Map overlayMapTypes özelliğini kullanarak mevcut bir MapType öğesine ekleyebilirsiniz. Bu mülk, MVCArray öğeden MapType tanesini içeriyor. Tüm harita türleri (taban ve yer paylaşımlı) mapPane katmanı içinde oluşturulur. Yer paylaşımı harita türleri, bağlı oldukları temel haritanın üst kısmında Map.overlayMapTypes dizisinde göründükleri sırayla gösterilir (dizin değeri daha yüksek olan 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 yer paylaşımlı bir 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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io Google Cloud Shell

Resim Eşleme Türleri

Esas harita türü olarak kullanmak için bir MapType uygulamak, zaman alan ve zahmetli bir iş olabilir. API, en yaygın harita türleri için (MapType) tek bir resim dosyasından oluşan parçalardan oluşan harita türleri uygulayan özel bir sınıf sağlar.

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

tileSize (zorunlu) Kartın boyutunu belirtir (google.maps.Size türünde). Boyutlar kare biçiminde olmasa da dikdörtgen olmalıdır.
getTileUrl (gerekli), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim blokunun seçimini işlemek için genellikle satır içi işlev değişmez değeri olarak sağlanan işlevi belirtir.

Aşağıdaki kod, Google'ın ay bloklarını kullanarak temel bir ImageMapType uygular. Örnek, karoların x ekseni boyunca tekrarlanmasını ancak haritanızın y ekseninde tekrarlanmasını önlemek için normalleştirme işlevini kullanı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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io Google Cloud Shell

Tahminler

Dünya üç boyutlu bir görüntüdür (yaklaşık olarak), harita ise iki boyutlu bir düz yüzeydir. Maps JavaScript API'de gördüğünüz harita, Dünya'nın düz bir haritası gibi, bu kürenin düz bir yüzeye uygulandığı bir projeksiyondur. En basit terimleriyle projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatlarla eşlenmesi olarak tanımlanabilir.

Maps JavaScript API'deki tahminler Projection arayüzünü uygulamalıdır. Projection uygulaması yalnızca bir koordinat sisteminden diğerine eşleme değil, iki yönlü eşleme de sağlamalıdır. Diğer bir deyişle, Earth koordinatlarından (LatLng nesne) Projection sınıfının dünya koordinatına nasıl çevrileceğini (veya tam tersi) tanımlamanız gerekir. Google Haritalar, harita verilerini coğrafi verilerden oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu tahmini, Map üzerinde (veya standart temel MapType türlerinden birinde) getProjection() çağırarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection yeterlidir, ancak kendi özel projeksiyonlarınızı da tanımlayabilir ve kullanabilirsiniz.

Projeksiyon Uygulama

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

Enlem ve boylam koordinatlarını Kartezyen uçakla (veya tam tersi) eşlemeyle ilgili formül. (Projection arayüzü, yalnızca doğrusal koordinatlara dönüştürmeyi destekler.)
Temel karo boyutu. Tüm karolar dikdörtgen olmalıdır.
Yakınlaştırma düzeyi 0'da ayarlanan temel karo kullanılarak bir haritanın "dünya boyutu". Yakınlaştırma 0 konumunda bir karodan oluşan haritalar için dünya boyutu ve temel karo boyutunun aynı olduğunu unutmayın.

Tahminlerde Dönüşümleri Dönüştürme

Her projeksiyonda, bu iki koordinat sistemi arasında çeviri yapan iki yöntem bulunur: Coğrafi ve dünya koordinatları arasında geçiş yapabilirsiniz:

Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, yer paylaşımlarını harita üzerinde 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, harita üzerinde gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlara dönüştürmek için kullanılır.

Google Haritalar, tahminlerin doğrusal olduğunu varsayar.

Genellikle bir projeksiyonu iki durumda kullanabilirsiniz: dünya haritası veya yerel bölge haritası oluşturmak. İlk durumda öngörünüzün tüm boylamlarda da doğrusal ve normal olduğundan emin olmanız gerekir. Bazı tahminler (özellikle konik tahminler) "yerel olarak normal" (yani kuzey nokta) olabilir, ancak gerçek kuzeyden sapma olabilir. Örneğin, harita biraz daha referans çizgisine göre konumlandırılır. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz, ancak projeksiyonun kusursuz olması gerektiğini ve dönüşüm hatalarının gitgide uzaklaştırdığınız referans boylamdan gittikçe uzaklaştığını unutmayın.

Tahminlerde Harita Kartı Seçimi

Projeksiyonlar yalnızca konumların veya bindirmelerin konumlarını belirlemek için değil, aynı zamanda harita desenlerinin kendisini konumlandırmak için de yararlıdır. Maps JavaScript API, temel haritaları MapType arayüzü kullanarak oluşturur. Bu arayüz hem harita projeksiyonunu belirlemek için bir projection özelliğini hem de çizgi koordinatı değerlerini temel alan harita parçalarını almak için bir getTile() yöntemini belirtmelidir. Karo koordinatları, hem temel karo boyutunuz (dikdörtgen olmalıdır) hem de haritanızın yakınlaştırma seviyesi 0 olan piksel boyutu olan "dünya boyutu"na dayanır. (Zoom 0'da bir karodan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)

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

Görüntü seçimi bu iletilen değerlere bağlı olduğundan, bu iletilen değerlere (ör. map_zoom_tileX_tileY.png) göre programatik olarak seçilebilecek resimleri 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"),
      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 göster

Örneği Deneyin

JSFiddle.net CodeSandbox.io 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° Dönen Görüntüler

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

Yer Paylaşımı Harita Türleri

TypeScript

JavaScript

Örneği Deneyin

Resim Eşleme Türleri

TypeScript

JavaScript

Örneği Deneyin

Tahminler

Projeksiyon Uygulama

Tahminlerde Dönüşümleri Dönüştürme

Tahminlerde Harita Kartı Seçimi

TypeScript

JavaScript

Örneği Deneyin

`MapType` Arayüzü