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

Harita Türleri

Platform 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 haritalar hakkındaki bilgileri saklamak için bir MapType nesnesi kullanır. MapType, harita karolarının görünümünü ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (haritada) çevirisini tanımlayan bir arayüzdür. Her MapType, karoların alınmasını ve yayınlanmasını yönetmek için birkaç yöntem ve görsel davranışını tanımlayan özellikler içermelidir.

Maps JavaScript API'deki harita türlerinin iç işleyişi gelişmiş bir konudur. Çoğu geliştirici aşağıda belirtilen temel harita türlerini kullanabilir. Bununla birlikte, Stilli Haritalar'ı kullanarak mevcut harita türlerinin gösterilmesini 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 kullanılabilir. Haritalar JavaScript API'si, bilinen " boyanmış" yol haritası parçaları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 ve uydu görünümlerinin bir karışımını gösterir.
terrain, arazi bilgilerine dayalı fiziksel bir harita görüntüler.

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

mapTypeId, kurulum 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 eşleme türünü doğrudan ayarlamak yerine, mapTypeId özelliğini bir tanımlayıcı kullanarak MapType özelliğine referans verecek şekilde ayarlayın. Maps JavaScript API, bu referansları yönetmek için aşağıda açıklandığı gibi bir 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ü, her bir ana yöne (Kuzey, Güney, Doğu, Batı) doğru 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, mevcut olduğu durumlarda 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ümlerini aşağıdaki şekilde otomatik olarak değiştirir:

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

tilt 45 olarak ayarlanmadığı sürece, yakınlaştırma düzeyi 12 ile 18 arasında yukarıdan aşağıya doğru (0°) varsayılan olarak görüntülenir.
tilt 0 olarak ayarlanmadıkça, 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 geliyor. Döndürme kontrolü, kullanıcının eğmeyi açma ve görünümü her iki yönde 90°'lik artışlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için rotateControl özelliğini false olarak ayarlayın.

45° görüntüler görüntüleyen bir harita türünden uzaklaştırmak, 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

Map nesnesinde setTilt(0) işlevini ç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 öğesinin getTilt() yöntemi, her zaman haritada gösterilen mevcut tilt değerini yansıtır. Haritada bir tilt belirleyip daha sonra bu tilt özelliğini 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 destek haritalarında 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 göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.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 yön 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ülendiğinde, Map nesnesinde setHeading() numarasını çağırarak ve kuzeyden derece cinsinden ifade edilen bir sayı değerini aktararak görüntüleri ana yönlerden birine yönlendirebilirsiniz.

Aşağıdaki örnekte havadan bir harita gösterilmektedir ve düğme tıklandığında 3 saniyede bir haritayı otomatik olarak döndürmektedir:

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

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

Haritadaki mapTypeId, MapType öğesini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map nesnesi, bir harita için kullanılabilir olan MapType'lerin toplanmasını içeren bir MapTypeRegistry sunar. Bu kayıt otoritesi, örneğin Haritalar'ın MapType kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.

Doğrudan harita türü kayıt defterinden okumazsanı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ştirebilirsiniz. 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, haritanın mapTypeControlOptions haritasında yalnızca iki harita türünü gösterecek şekilde ayarlanır ve kayıt defterini, 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ıyarak yollar, parklar ve inşaat alanları gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stilde yansıtacak şekilde değiştirir.

StyledMapType hakkında daha fazla bilgi için stil 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 yer paylaşımlarını uygulamanıza olanak tanır.

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

Toplu harita görüntülerinin tamamını oluşturan resimlerden oluşan standart döşeme grupları. Bu karo kümeleri, 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. Haritalar JavaScript API'sindeki kullanıcı arayüzünün özel harita türünüzü standart bir harita türü olarak ele alması (örneğin, MapType kontrolüne dahil ederek) için özel harita türünüzü bir Haritalar'ın mapTypes dizisine ekleyebilirsiniz.
Resim kutusu, mevcut temel harita türlerinin üzerinde görünen yer paylaşımları. 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 konumlar ve/veya yakınlaştırma seviyeleriyle sınırlıdı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, görüntü dışındaki harita türleri.

Bu seçeneklerin her biri, MapType arayüzünü uygulayan bir sınıf oluşturmaya dayanır. Ayrıca ImageMapType sınıfı, görüntü eşleme türlerinin oluşturulmasını kolaylaştırmak 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 anlamak önemlidir. Tüm temel veya bindirme 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 parçalarını geçerli görüntü alanı ve yakınlaştırma düzeyinde görüntülemesi gerektiğini belirlediğinde API'nizin harita türlerinize yönelik istekler başlatmasına izin veren belirli özellikleri ve yöntemleri belirtir. Hangi paketin yükleneceğine karar vermek için bu istekleri siz 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ı gerektirir:

tileSize (zorunlu) Kartın boyutunu (google.maps.Size türünde) belirtir. Boyutlar kare biçiminde olmasa da dikdörtgen olmalıdır.
maxZoom (zorunlu) Bu harita türünün karolarının görüntüleneceğ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. Varsayılan olarak minimum değer, 0 değerinin minimum yakınlaştırma düzeyi olmadığını belirtir.
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çilebilmesini istiyorsanız gereklidir. (Aşağıdaki MapType Denetimlerini Ekleme bölümüne bakın.)
alt (isteğe bağlı), fareyle üzerine gelme metni olarak gösterilen bu harita türünün alternatif metnini belirtir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolünde seçilebilmesini istiyorsanız gereklidir. (Aşağıdaki MapType Denetimlerini Ekleme bölümüne 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 kartlar görüntülemesi gerektiğini belirlediğinde getTile() (zorunlu) çağrılır. getTile() yönteminde aşağıdaki imza bulunmalıdır:

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

API; MapType'nin 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ğırmanın gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, karo resmin ekleneceği geçiş koordinatı, yakınlaştırma düzeyi ve DOM öğesine sahip bir HTML öğesi döndürmelidir.
releaseTile() (İsteğe bağlı) API, haritanın görünüm dışında kalan bir karoyu kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemde aşağıdaki imza bulunmalıdır:

releaseTile(tile:Node)

Genellikle, haritaya ek olarak harita karolarına eklenen tüm öğeleri kaldırmalısınız. Örneğin, karo yer paylaşımlarına etkinlik işleyiciler eklediyseniz bunları burada kaldırmalısınız.

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

Temel Harita Türleri

Bu şekilde oluşturduğunuz harita türleri ya tek başına ya da diğer harita türleriyle yer paylaşımlı olarak birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu gibi özel MapType öğelerini mevcut diğer temel harita türleri (ROADMAP, TERRAIN vb.) gibi 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 karo koordinatlarını görüntülemek için bir temel MapType oluşturur ve karoların dış çizgisini ç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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Yer Paylaşımlı Harita Türleri

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

Bu tür durumlarda, harita türünün ayrı bir varlık olarak değil, bir yer paylaşımı olarak işlenmesini istersiniz. Bunun için eşleme türünü Map öğesinin overlayMapTypes özelliğini kullanarak mevcut bir MapType öğesine doğrudan ekleyebilirsiniz. Bu mülkte MVCArray / MapType yer alıyor. Tüm harita türleri (taban ve bindirme) mapPane katmanı içinde oluşturulur. Yer paylaşımı harita türleri, ait oldukları temel haritanın üzerinde, Map.overlayMapTypes dizisinde göründükleri sırayla gösterilir (dizin değerleri daha yüksek olan yer paylaşımları, dizin değerleri daha düşük olan yer paylaşımlarının önünde gösterilir).

Aşağıdaki örnek, ROADMAP eşleme türünün en üst kısmında MapType karo yer paylaşımı oluşturmamız haricinde ö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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Resim Haritası Türleri

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

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 (google.maps.Size türünde) belirtir. 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 doğru resim karosunun 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 uygulamaktadır. Örnek, karoların x ekseni boyunca tekrarlanmasını ancak haritanızın y ekseni boyunca tekrarlanmasını önlemek için normalleştirme işlevinden yararlanı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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Tahminler

Dünya üç boyutlu bir küredir (yaklaşık) ve iki boyutlu bir haritadır. Maps JavaScript API'de gördüğünüz harita, dünyanın düz bir haritası gibi, bu kürenin düz bir yüzeye doğru yükseltilmesidir. En basit ifade ile bir 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. Yani, Dünya koordinatlarından (LatLng nesne) Projection sınıfının dünya koordinatı sistemine nasıl çevireceğinizi 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 projeksiyonu Map (veya standart temel MapType türlerinden herhangi birinde) getProjection() numaralı telefonu arayarak alabilirsiniz. Çoğu kullanım için bu standart Projection yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayabilir ve kullanabilirsiniz.

Projeksiyon uygulama

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

Enlem ve boylam koordinatlarının Cartesian düzlemine eşlenmesine ilişkin formül. (Projection arayüzü yalnızca dikdörtgen koordinatlara dönüştürmeyi destekler.)
Temel karo boyutu. Tüm kartlar 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 değerine sahip bir karodan oluşan haritalarda, dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.

Tahminlerde Dönüşümleri Koordine Etme

Her projeksiyonda bu iki koordinat sistemi arasında çeviri yapan iki yöntem bulunur: Coğrafi ve dünya koordinatları arasında dönüşüm yapmanızı sağlar:

Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, bindirmeleri 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, haritada 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.

Bir projeksiyonu genellikle iki durum için kullanabilirsiniz: bir dünya haritasını veya yerel bir bölgenin haritasını oluşturmak. İlk durumda, projeksiyonunuzun tüm boylamlarda dikdörtgen ve normal olduğundan da emin olmalısınız. Bazı öngörüler (özellikle konik tahminler) "yerel olarak normal" (yani kuzey noktası) olabilir, ancak gerçek kuzeyden sapma gösterebilir. Örneğin, harita biraz daha uzun olduğundan referans boylama göre konumlandırılır. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz, ancak projeksiyonun kesin olarak kesin olmamasına ve dönüşüm hatalarının, sapmakta olan referans boylamına oranla daha belirgin hale geleceğine dikkat edin.

Tahminlerde Harita Kartı Seçimi

Tahminler, sadece konumların veya bindirmelerin konumlarını belirlemek için değil, aynı zamanda harita bloklarının kendilerini konumlandırmak için de yararlı olur. Maps JavaScript API, temel haritaları bir MapType arayüzü kullanarak oluşturur. Bu arayüz hem haritanın projeksiyonunu belirlemek için bir projection özelliği hem de karo koordinat değerlerine dayalı olarak harita karolarını alma için bir getTile() yöntemi belirtmelidir. Karo koordinatları, hem temel karo boyutunu (dikdörtgen olması gerekir) hem de haritanızın yakınlaştırma seviyesi 0'daki piksel boyutu olan "dünya boyutunu" temel alır. (Zoom 0'da bir karodan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)

Temel karo boyutunu MapType öğenizin tileSize özelliği içinde tanımlarsınız. Projeksiyonunuzun fromLatLngToPoint() ve fromPointToLatLng() yöntemlerinde dünya boyutunu 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 iletilen değerlerle 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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.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şımlı Harita Türleri

TypeScript

JavaScript

Örneği Deneyin

Resim Haritası Türleri

TypeScript

JavaScript

Örneği Deneyin

Tahminler

Projeksiyon uygulama

Tahminlerde Dönüşümleri Koordine Etme

Tahminlerde Harita Kartı Seçimi

TypeScript

JavaScript

Örneği Deneyin

`MapType` Arayüzü