Places UI Kit: Geliştiricilere özelleştirme ve kontrol imkanı sunan, kullanıma hazır bir kitaplıktır. Deneyin ve kullanıcı arayüzü kiti deneyiminizle ilgili görüşlerinizi paylaşın.

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

Harita Türleri

Platform seçin: Android iOS JavaScript

Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri ele alınmaktadır. API, bu haritalarla ilgili bilgileri tutmak için MapType nesnesini kullanır. MapType , harita döşemelerinin gösterimini ve kullanımını, koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (haritada) dönüştürülmesini tanımlayan bir arayüzdür. Her MapType, kutucukların alınmasını ve yayınlanmasını işlemek 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, Stil Verilmiş Haritalar'ı kullanarak mevcut harita türlerinin sunumunu da değiştirebilir veya özel harita türlerini kullanarak kendi harita döşemelerinizi 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. Maps JavaScript API, alışkın olduğumuz "boyalı" yol haritası döşemelerine 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ı bir fiziksel harita gösterir.

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

İnşaat sırasında mapTypeId'ı 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');

Haritanın harita türünü doğrudan ayarlamadığınızı, bunun yerine bir tanımlayıcı kullanarak MapType öğesine referans verecek şekilde mapTypeId öğesini ayarladığınızı unutmayın. Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan bir harita türü kaydı 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, her bir ana yöne (kuzey, güney, doğu, batı) doğru perspektif görünümler sunar. Bu görüntüler, desteklenen harita türlerinde daha yüksek yakınlaştırma düzeylerinde kullanılabilir.

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

satellite ve hybrid harita türleri, mevcut olduğu yerlerde 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 otomatik olarak aşağıdaki şekilde değiştirir:

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

12 ile 18 arasındaki yakınlaştırma düzeylerinde, tilt 45 olarak ayarlanmadığı sürece varsayılan olarak yukarıdan aşağıya temel harita (0°) gösterilir.
18 veya daha yüksek yakınlaştırma düzeylerinde, 45° temel harita görüntülenir. Ancak tilt 0 olarak ayarlanırsa bu durum geçerli olmaz.

Döndürme kontrolü görünür hale gelir. Döndürme kontrolü, kullanıcının eğimi değiştirmesini ve görünümü her iki yönde 90° artışlarla 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üleri gösteren bir harita türünde uzaklaştırma işlemi yapıldığında bu değişikliklerin her biri geri alınır ve orijinal harita türleri yeniden oluşturulur.

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

setTilt(0) nesnesinde Map çağrısı yaparak 45 derecelik 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ın getTilt() yöntemi, haritada gösterilen mevcut tilt değerini her zaman yansıtır. Haritada bir tilt ayarlayıp daha sonra bu tilt değerini 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ü yalnızca raster haritalarda desteklenir. Bu görüntü, vektör haritalarla kullanılamaz.

Aşağıdaki örnekte New York City'nin 45 derecelik 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örüntüleyin

Örneği deneyin

JSFiddle.net Google Cloud Shell

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

45° görüntüleri döndürme

45° açılı görüntüler aslında her ana yön (kuzey, güney, doğu, batı) için bir dizi görüntüden oluşur. Haritanızda 45° görüntüleri gösterildikten sonra, setHeading() işlevini Map nesnesinde çağırarak ve kuzeyden derece olarak ifade edilen bir sayı değeri ileterek görüntüleri ana yönlerden birine doğru yönlendirebilirsiniz.

Aşağıdaki örnekte, bir hava fotoğrafı haritası gösterilmekte ve düğme tıklandığında harita her 3 saniyede bir otomatik olarak döndürülmektedir:

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örüntüleyin

Örneği deneyin

JSFiddle.net Google Cloud Shell

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

Harita Türü Kayıt Defterini Değiştirme

Bir haritanın mapTypeId, MapType ile benzersiz bir değeri ilişkilendirmek için kullanılan dize tanımlayıcıdır. Her Map nesnesi, söz konusu harita için kullanılabilir MapType'ların koleksiyonunu içeren bir MapTypeRegistry tutar. 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 üzerinde oynayamazsınız (ancak haritanın ilişkili mapTypeControlOptions görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).

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

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

var MY_MAPTYPE_ID = 'mymaps';

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

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

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

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

Stilli Haritalar

StyledMapType, standart Google temel haritalarının sunumunu özelleştirmenize olanak tanır. Böylece yollar, parklar ve yerleşim alanları gibi öğelerin görsel gösterimini, varsayılan harita türünde kullanılan stilden farklı bir stili yansıtacak şekilde değiştirebilirsiniz. StyledMapType yalnızca varsayılan roadmap harita türünü etkiler.

StyledMapType hakkında daha fazla bilgi için Yerleştirilmiş JSON stili bildirimlerini kullanma başlıklı makaleyi inceleyin.

Özel Harita Türleri

Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekler. Bu sayede kendi harita görüntülerinizi veya döşeme katmanlarınızı uygulayabilirsiniz.

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

Birlikte tam kartografik haritaları oluşturan resimlerden oluşan standart karo kümeleri. Bu döşeme kümeleri temel harita türleri olarak da bilinir. Bu harita türleri, mevcut varsayılan harita türleri gibi çalışır: roadmap, satellite, hybrid ve terrain. Maps JavaScript API'deki kullanıcı arayüzünün özel harita türünüzü standart bir harita türü olarak değerlendirmesini sağlamak için (örneğin, MapType denetimine dahil ederek) özel harita türünüzü bir Map'in mapTypes dizisine ekleyebilirsiniz.
Mevcut temel harita türlerinin üzerinde gösterilen resim karo yer paylaşımları. Genellikle bu harita türleri, ek bilgileri göstermek için mevcut bir harita türünü desteklemek amacıyla kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma düzeyleriyle sınırlıdır. Bu kutucukların şeffaf olabileceğini ve mevcut haritalara özellik eklemenize olanak tanıyabileceğini unutmayın.
Harita bilgilerinin en temel düzeyde gösterimini değiştirmenize olanak tanıyan, görüntü olmayan 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ü haritası türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar sağlar.

`MapType` Arabirimi

MapType uygulayan sınıflar oluşturmadan önce Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerini göstereceğine nasıl karar verdiğini anlamanız önemlidir. Temel veya yer paylaşımı 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 mevcut görünüm penceresinde ve yakınlaştırma düzeyinde harita döşemelerini göstermesi gerektiğini belirlediğinde API'nin harita türlerinize istek başlatmasına olanak tanıyan belirli özellikleri ve yöntemleri belirtir. Hangi kutucuğun yükleneceğine karar vermek için bu istekleri işlersiniz.

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

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

tileSize (zorunlu), karo boyutunu (google.maps.Size türünde) belirtir. Boyutlar kare olmasa da dikdörtgen olmalıdır.
maxZoom (zorunlu), bu harita türünün döşemelerinin görüntüleneceği maksimum yakınlaştırma düzeyini belirtir.
minZoom (isteğe bağlı) Bu harita türünün döşemesinin görüntüleneceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer 0'dır. Bu değer, minimum yakınlaştırma düzeyi olmadığını gösterir.
name (isteğe bağlı), bu harita türünün adını belirtir. Bu özellik yalnızca bu harita türünün MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. ( Kontrol Seçenekleri bölümüne bakın.)
alt (isteğe bağlı) Bu harita türü için alternatif metni belirtir. Bu metin, fareyle üzerine gelindiğinde gösterilir. Bu özellik yalnızca bu harita türünün MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (Kontrol Seçenekleri bölümüne bakın.)

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

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

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

API, getTile() özelliğini çağırması gerekip gerekmediğini MapType'nin tileSize, minZoom ve maxZoom özelliklerine, haritanın mevcut görünüm alanına ve yakınlaştırma düzeyine göre belirler. Bu yöntemin işleyicisi, iletilen bir koordinat, yakınlaştırma düzeyi ve döşeme resminin ekleneceği DOM öğesi verildiğinde bir HTML öğesi döndürmelidir.
releaseTile() (isteğe bağlı), API, haritanın görünüm dışında kaldığı için bir karo kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemin aşağıdaki imzaya sahip olması gerekir:

releaseTile(tile:Node)

Genellikle, harita döşemelerine eklenen öğelerin kaldırılmasını siz yönetmelisiniz. Örneğin, harita döşemesi yer paylaşımlarına etkinlik işleyicileri eklediyseniz bunları buradan kaldırmanız gerekir.

getTile() yöntemi, belirli bir görüntü alanında hangi döşemelerin 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 tek başına kullanılabilir veya diğer harita türleriyle yer paylaşımı olarak birleştirilebilir. Bağımsız harita türleri temel harita türleri olarak bilinir. API'nin bu tür özel MapType'ları diğer mevcut temel harita türleri (ROADMAP, TERRAIN vb.) gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType değerinizi Map öğesinin mapTypes özelliğine ekleyin. Bu mülk, MapTypeRegistry türündedir.

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

TypeScript

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

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

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

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

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

  releaseTile(tile: HTMLElement): void {}
}

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

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

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

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

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

JavaScript

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

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

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

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

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

window.initMap = initMap;index.js

Örneği görüntüleyin

Örneği deneyin

JSFiddle.net Google Cloud Shell

Harita Türlerini Yerleştirme

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

Bu durumlarda, harita türünün ayrı bir öğe olarak değil, yer paylaşımı olarak değerlendirilmesini istersiniz. Bunu, Map öğesinin overlayMapTypes özelliğini kullanarak harita türünü doğrudan mevcut bir MapType öğesine ekleyerek yapabilirsiniz. Bu mülk, MapType öğelerinin MVCArray içeriyor. Tüm harita türleri (temel ve yer paylaşımı) mapPane katmanında oluşturulur. Yer paylaşımı harita türleri, bağlı 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 üzerine MapType döşeme yerleşimi oluşturmamız dışında ö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

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örüntüleyin

Örneği deneyin

JSFiddle.net Google Cloud Shell

Resim Haritası Türleri

Temel harita türü olarak kullanılacak bir MapType uygulamak zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri için MapType arayüzünü uygulayan özel bir sınıf sağlar: Tek resim dosyalarından oluşan döşemelerden oluşan harita türleri.

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

tileSize (zorunlu), karo boyutunu (google.maps.Size türünde) belirtir. Boyutlar kare olmasa da dikdörtgen olmalıdır.
getTileUrl (zorunlu) işlevi belirtir. Genellikle satır içi işlev değişmezi olarak sağlanır ve sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim döşemesinin seçilmesini sağlar.

Aşağıdaki kod, Google'ın ay döşemelerini kullanarak temel bir ImageMapType uygular. Bu örnekte, döşemelerin haritanızın y ekseni boyunca değil, x ekseni boyunca tekrar etmesini sağlamak için bir normalleştirme işlevi kullanılı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örüntüleyin

Örneği deneyin

JSFiddle.net Google Cloud Shell

Tahminler

Dünya yaklaşık olarak üç boyutlu bir küre, 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, bu kürenin düz bir yüzeye projeksiyonudur. En basit haliyle projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatlara eşlenmesi olarak tanımlanabilir.

Maps JavaScript API'deki projeksiyonlar Projection arayüzünü uygulamalıdır. Bir Projection uygulaması, yalnızca bir koordinat sisteminden diğerine eşleme sağlamakla kalmamalı, aynı zamanda çift yönlü bir eşleme de sağlamalıdır. Yani, Dünya koordinatlarından (LatLng nesneleri) Projection sınıfının dünya koordinat sistemine ve dünya koordinat sisteminden tekrar Dünya koordinatlarına nasıl çeviri yapılacağını tanımlamanız gerekir. Google Haritalar, coğrafi verilerden haritalar oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu tahmini almak için Map'te getProjection() numaralı telefonu arayabilirsiniz (veya standart temel MapType türlerinden herhangi birini). Çoğu kullanım için bu standart Projection yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.

Tahmin Uygulama

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

Enlem ve boylam koordinatlarını Kartezyen düzleme eşleme formülleri ve Kartezyen düzlemden enlem ve boylam koordinatlarına eşleme formülleri. (Projection arayüzü yalnızca doğrusal koordinatlara dönüştürmeyi destekler.)
Temel karo boyutu. Tüm kutular dikdörtgen olmalıdır.
Yakınlaştırma düzeyi 0'da temel karo grubu kullanılarak oluşturulan bir haritanın "dünya boyutu". 0 yakınlaştırma düzeyinde tek bir kutudan oluşan haritalarda dünya boyutu ve temel kutu boyutunun aynı olduğunu unutmayın.

Projeksiyonlarda Koordinat Dönüşümleri

Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sunar. Bu sayede coğrafi koordinatlar ile dünya koordinatları arasında dönüşüm yapabilirsiniz:

Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, haritadaki yer paylaşımlarını (ve haritanın kendisini) 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.

Genellikle, dünya haritası veya yerel bir bölgenin haritasını oluşturmak için projeksiyon kullanabilirsiniz. İlk durumda, projeksiyonunuzun tüm boylamlarda doğrusal ve normal olduğundan emin olmalısınız. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani kuzeyi gösterir) olabilir ancak gerçek kuzeyden sapabilir. Örneğin, harita bazı referans boylamlarına göre ne kadar uzağa yerleştirilirse sapma o kadar fazla olur. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun zorunlu olarak kesin olmadığını ve referans boylamdan uzaklaştıkça dönüşüm hatalarının giderek daha belirgin hale geleceğini unutmayın.

Tahminlerde harita kutusu seçimi

Projeksiyonlar yalnızca konumların veya yer paylaşımlarının pozisyonlarını belirlemek için değil, harita döşemelerini konumlandırmak için de kullanışlıdır. Maps JavaScript API, MapType arayüzünü kullanarak temel haritaları oluşturur. Bu arayüz, haritanın projeksiyonunu tanımlamak için projection özelliğini ve tile koordinat değerlerine göre harita döşemelerini almak için getTile() yöntemini bildirmelidir. Karo koordinatları, hem temel karo boyutunuza (dikdörtgen olmalıdır) hem de haritanızın "dünya boyutuna" (yakınlaştırma düzeyi 0'da harita dünyanızın piksel boyutu) göre belirlenir. (0 yakınlaştırma düzeyinde tek bir kutudan oluşan haritalarda kutu boyutu ve dünya boyutu aynıdır.)

Temel döşeme 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.

Resim seçimi bu aktarılan değerlere bağlı olduğundan, bu aktarılan değerler göz önünde bulundurularak programatik olarak seçilebilen resimleri adlandırmak faydalıdır. Örneğin: map_zoom_tileX_tileY.png.

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
const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
let innerMap;

async function initMap() {
  // Request the needed libraries.
  await google.maps.importLibrary("maps");

  // Create a map.
  innerMap = mapElement.innerMap;
  innerMap.setOptions({
    mapTypeControl: false,
  });

  // Set the Gall-Peters map type.
  initGallPeters();
  innerMap.mapTypes.set("gallPeters", gallPetersMapType);
  innerMap.setMapTypeId("gallPeters");

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

  innerMap.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.
  innerMap.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name") as string,
      optimized: false,
    };
  });
  innerMap.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 (
        "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" },
    },
  ],
};

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
const mapElement = document.querySelector("gmp-map");
let innerMap;
async function initMap() {
    // Request the needed libraries.
    await google.maps.importLibrary("maps");
    // Create a map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    // Set the Gall-Peters map type.
    initGallPeters();
    innerMap.mapTypes.set("gallPeters", gallPetersMapType);
    innerMap.setMapTypeId("gallPeters");
    // Show the lat and lng under the mouse cursor.
    const coordsDiv = document.getElementById("coords");
    innerMap.addListener("mousemove", (event) => {
        coordsDiv.textContent =
            "lat: " +
                Math.round(event.latLng.lat()) +
                ", " +
                "lng: " +
                Math.round(event.latLng.lng());
    });
    // Add some markers to the map.
    innerMap.data.setStyle((feature) => {
        return {
            title: feature.getProperty("name"),
            optimized: false,
        };
    });
    innerMap.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 ("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" },
        },
    ],
};
initMap();index.js

Örneği görüntüleyin

Örneği deneyin

JSFiddle.net

Harita Türleri Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Temel Harita Türleri

45° Görüntüler

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

TypeScript

JavaScript

Örneği deneyin

45° görüntüleri döndürme

TypeScript

JavaScript

Örneği deneyin

Harita Türü Kayıt Defterini Değiştirme

Stilli Haritalar

Özel Harita Türleri

MapType Arabirimi

Temel Harita Türleri

TypeScript

JavaScript

Örneği deneyin

Harita Türlerini Yerleştirme

TypeScript

JavaScript

Örneği deneyin

Resim Haritası Türleri

TypeScript

JavaScript

Örneği deneyin

Tahminler

Tahmin Uygulama

Projeksiyonlarda Koordinat Dönüşümleri

Tahminlerde harita kutusu seçimi

TypeScript

JavaScript

Örneği deneyin

Harita Türleri

`MapType` Arabirimi