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 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ın yanı sıra koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) çevrilmesini tanımlayan bir arayüzdür. Her MapType, kartları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 ileri düzey bir konudur. Çoğu geliştirici, aşağıda belirtilen temel harita türlerini kullanabilir. Ancak, Stilli Haritalar'ı kullanarak mevcut harita türlerinin sunumunu değiştirebilir veya özel harita türlerini kullanarak kendi harita karolarınızı tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kaydı'nda nasıl değişiklik yapacağınızı anlamanız gerekir.

Temel Harita Türleri

Maps JavaScript API'de dört harita türü bulunur. Bilinen "boyalı" yol haritası döşemelerine ek olarak, Maps JavaScript API, 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 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ü, Map options nesnesini ayarlayarak oluşturucunun içinde veya haritanın setMapTypeId() yöntemini çağırarak harita türünün mapTypeId özelliğini ayarlayarak değiştirirsiniz. mapTypeID özelliği varsayılan olarak roadmap değerine ayarlanır.

İnşaat sırasında mapTypeId ayarlama:

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

Aslında haritanın harita türünü doğrudan belirlemezsiniz. Bunun yerine, haritanın mapTypeId özelliğini, bir tanımlayıcı kullanarak bir MapType referansına yönlendirecek şekilde ayarlayın. Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan 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üler, ana yönlerin her birine (Kuzey, Güney, Doğu, Batı) doğru perspektif görünümleri sunar. 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:

Örnekler, bölgenizde kullanılamayabilir.

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, geçerli konumun merkezinde 45° bakış açısı sağlayan görüntülerle değiştirilir. Bu tür görünümler varsayılan olarak kuzeye doğrudur. Kullanıcı görüntüyü uzaklaştırırsa varsayılan uydu veya karma görüntü tekrar gösterilir. Davranış, yakınlaştırma düzeyine ve tilt değerine göre değişir:
• tilt 45 değerine ayarlanmadığı sürece, yakınlaştırma düzeyleri 12 ile 18 arasında olduğunda yukarıdan aşağıya temel harita (0°) varsayılan olarak gösterilir.
• tilt 0'a ayarlanmadığı sürece 18 veya daha yüksek yakınlaştırma düzeylerinde 45° temel harita görüntülenir.
• Döndürme denetimi görünür hale gelir. Döndürme kontrolü, kullanıcının yatırmayı açıp kapatmasını ve görünümü her iki yönde 90°'lik artımlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için rotateControl öğesini false olarak ayarlayın.

45° görüntülerin gösterildiği bir harita türünü uzaklaştırdığınızda, bu değişikliklerin her biri geri alınarak 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'in getTilt() yöntemi, her zaman haritada gösterilen geçerli tilt bilgisini yansıtır. Haritada bir tilt ayarlayıp 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 kafesli 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

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

45° Görüntüler Döndürülüyor

45° görüntüler aslında her bir ana yöne (Kuzey, Güney, Doğu, Batı) ait bir dizi resimden oluşur. Haritanız 45° görüntüler görüntülediğinde, Map nesnesinde setHeading() işlevini çağırarak ve kuzeyden derece olarak ifade edilen bir sayı değeri ileterek 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 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Ö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 dize tanımlayıcısıdır. Her Map nesnesi, bu harita için kullanılabilir MapType koleksiyonunu içeren bir MapTypeRegistry içerir. Bu kayıt otoritesi, örneğin, Map'in MapType denetiminde bulunan harita türlerini seçmek için kullanılır.

Harita türü kaydından doğrudan okumazsınız. Bunun yerine, özel harita türleri ekleyip 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 haritanın ilişkilendirilmiş mapTypeControlOptions görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).

Aşağıdaki kod, haritayı, mapTypeControlOptions öğesinde yalnızca iki harita türünü gösterecek şekilde ayarlar 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.

Not: Aşağıdaki kod örneğinde, özel harita türünün oluşturulması kasıtlı olarak atlanmıştır. Harita türü oluşturma hakkında bilgi için aşağıdaki Stilli Haritalar veya Özel Harita Türleri bölümlerine bakın.

// 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. Bu sayede yollar, parklar ve yerleşim alanları gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stil yansıtacak şekilde değiştirebilirsiniz.

StyledMapType hakkında daha fazla bilgi için stilli 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 kartografik haritaları oluşturan resimlerden oluşan standart karo grupları. Bu parça grupları, temel harita türleri olarak da bilinir. Şu harita türleri, mevcut varsayılan harita türleri gibi davranır: roadmap, satellite, hybrid ve terrain. Özel harita türünüzü bir Harita'nın mapTypes dizisine ekleyebilirsiniz. Böylece, Maps JavaScript API'deki kullanıcı arayüzünün, özel harita türünüzü standart bir harita türü olarak değerlendirmesi (örneğin, MapType denetimine dahil edilebilir) için geçerlidir.
• Mevcut temel harita türlerinin üzerinde gösterilen resim parçası yer paylaşımları. Bu harita türleri genellikle ek bilgi görüntülemek amacıyla mevcut bir harita türünü genişletmek için kullanılır ve çoğu zaman belirli konumlar ve/veya yakınlaştırma düzeyleriyle sınırlıdır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
• Harita bilgilerinin görüntüsünü en temel düzeyde değiştirmenize olanak tanıyan, görsel olmayan harita türleri.

Bu seçeneklerin her biri, MapType arayüzünü uygulayan bir sınıf oluşturulmasına dayanır. Ayrıca, ImageMapType sınıfı, görüntü harita türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar da sunar.

MapType Arayüzü

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

Özel harita türleri MapType arayüzünü uygulamalıdır. Bu arayüz, API'nin mevcut görüntü alanı ve yakınlaştırma düzeyinde harita desenleri görüntülemesi gerektiğini belirlediğinde API'nin harita türlerinize istekler başlatmasına olanak tanıyan belirli özellikleri ve yöntemleri belirtir. Hangi kartın 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 hâlihazırda bu arayüzün uygulandığı 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 (gerekli), döşemenin boyutunu belirtir (google.maps.Size türünde). Boyutlar kare şeklinde olmamalarına rağmen dikdörtgen olmalı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ünün parçasının gösterileceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer, minimum yakınlaştırma düzeyinin olmadığını gösteren 0 değeridir.
• 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 Denetim Ekleme bölümüne bakın.)
• alt (isteğe bağlı), bu harita türü için alternatif metni belirtir ve fareyle üzerine gelindiğinde gösterilen metin olarak gösterilir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolü içinde seçilebilmesini istiyorsanız gereklidir. (Aşağıdaki MapType Denetim 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 belirtilen görüntü alanı için yeni karolar göstermesi 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 tileSize, minZoom ve maxZoom özelliklerine ve haritanın mevcut görüntü alanı ile yakınlaştırma düzeyine göre getTile() çağırmasının gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, iletilen koordinat, yakınlaştırma düzeyi ve parça resminin ekleneceği DOM öğesi için 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 ek olarak harita parçalarına eklenmiş tüm öğeleri kaldırmanız gerekir. Örneğin, harita karo 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 diğer harita türleriyle bindirme olarak birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu özel MapType'leri diğer mevcut temel harita türlerinde (ROADMAP, TERRAIN vb.) olduğu gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType öğenizi Map öğesinin mapTypes mülküne ekleyin. Bu özelliğin türü MapTypeRegistry.

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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net 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 durumlarda, harita türünün ayrı bir varlık olarak değil, bindirme olarak değerlendirilmesini istersiniz. Bunu, harita türünü doğrudan Map öğesinin overlayMapTypes özelliğini kullanıp mevcut bir MapType öğesine ekleyerek yapabilirsiniz. Bu özellik, MapType içeren MVCArray içeriyor. Tüm harita türleri (temel ve bindirme) mapPane katmanında oluşturulur. Yer paylaşımlı harita türleri, ekli oldukları temel haritanın üzerinde 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 MapType bir karo yer paylaşımı oluşturmamız haricinde bir öncekiyle 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Resim Haritası Türleri

Temel harita türü olarak işlev görmek için MapType uygulamak zaman alan ve emek isteyen bir iş olabilir. API, en yaygın harita türleri olan, 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 ImageMapType sınıfı, aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions nesne spesifikasyonu kullanılarak oluşturulur:

• tileSize (gerekli), döşemenin boyutunu belirtir (google.maps.Size türünde). Boyutlar kare şeklinde olmamalarına rağmen dikdörtgen olmalıdır.
• getTileUrl (zorunlu), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim parçasının seçimini işlemek için genellikle satır içi işlev değişmez değeri olarak sunulan işlevi belirtir.

Aşağıdaki kod, Google'ın ay karolarını kullanarak temel bir ImageMapType uygular. Örnekte, karoların haritanızın y ekseninde değil, x ekseninde tekrarlanmasını sağlamak için bir normalleştirme işlevi kullanılmıştı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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Tahminler

Dünya üç boyutlu bir küredir (yaklaşık olarak); harita ise düz, iki boyutlu bir yüzeydir. Maps JavaScript API'de gördüğünüz harita, Dünya'nın herhangi bir düz haritası gibi, o kürenin düz bir yüzey üzerindeki projeksiyonudur. En basit şekilde ifade etmek gerekirse projeksiyon, enlem/boylam değerlerinin projeksiyon haritası üzerinde koordinatlarla eşlenmesi olarak tanımlanabilir.

Maps JavaScript API'deki tahminler Projection arayüzünü uygulamalıdır. Projection uygulaması, bir koordinat sisteminden diğerine eşlemenin yanı sıra iki yönlü bir eşleme sağlamalıdır. Yani, Earth koordinatlarından (LatLng nesneler) Projection sınıfındaki 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 projeksiyonu kullanır. Bu projeksiyonu, Map üzerinde getProjection() (veya standart MapType türlerinden herhangi birinde) çağırarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection yeterli olur ama kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.

Projeksiyonu Uygulama

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

• Enlem ve boylam koordinatlarını Kartezyen düzlemde (veya tersi) eşlemeye yönelik formüller. (Projection arayüzü yalnızca doğrusal koordinatlara dönüştürme işlemleri destekler.)
• Taban karo boyutu. Tüm karolar dikdörtgen olmalıdır.
• Yakınlaştırma düzeyi 0 olarak ayarlanmış temel karoyu kullanan bir haritanın "dünya boyutu". Yakınlaştırma seviyesi 0 olan bir bloktan oluşan haritalarda dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.

Projeksiyonlardaki Dönüşümleri Koordine Etme

Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sağlayarak 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 haritaya konumlandırmak (ve haritayı konumlandırmak) için kullanılır.
• Projection.fromPointToLatLng() yöntemi, 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.

Genel olarak projeksiyonu iki durum için kullanabilirsiniz: dünya haritası oluşturmak veya bir yerel bölgenin haritasını oluşturmak için. İlk durumda, projeksiyonunuzun tüm boylamlarda doğrusal ve normal olduğundan da emin olmanız gerekir. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani kuzeyi işaret eden) olabilir, ancak gerçek kuzeyden sapma gösterebilir. Örneğin, harita bazı referans boylama göre ne kadar uzak konumlandırılır. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun her zaman tam olarak doğru olmadığını ve dönüşüm hatalarının, saptığınız referans boylamından ne kadar uzaklaştıkça giderek daha belirgin hale geleceğini unutmayın.

Projeksiyonlarda Harita Bölümü Seçimi

Projeksiyonlar sadece konumların veya bindirmelerin konumlarını belirlemekte değil, aynı zamanda harita parçalarını konumlandırmak için de yararlıdır. Maps JavaScript API, temel haritaları bir MapType arayüzü kullanarak oluşturur. Bu arayüz, hem haritanın projeksiyonunu tanımlamak için projection özelliği hem de parça koordinatı değerlerine göre harita desenleri almak için getTile() yöntemi beyan etmelidir. Karo koordinatları, hem temel karo boyutuna (dikdörtgen olmalıdır) hem de haritanızın "dünya boyutuna" (yakınlaştırma düzeyinde 0, harita dünyanızın piksel boyutu) dayanır. (Yakınlaştırma düzeyi 0 olduğunda tek bir bloktan oluşan haritalarda 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, iletilen bu değerlere bağlı olduğundan map_zoom_tileX_tileY.png gibi iletilen bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak faydalıdır.

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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell