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 haritalarla ilgili bilgileri tutmak için bir MapType nesnesi kullanır. MapType, harita bloklarının görünümünü ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (haritada) dönüştürülmesini tanımlayan bir arayüzdür. Her MapType, karoların getirilmesini 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 sunulmasını 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ü Kaydı'nı nasıl değiştireceğinizi anlamanız gerekir.

Temel Harita Türleri

Maps JavaScript API'de dört tür harita bulunur. Haritalar JavaScript API'sı, bilinen "renkli" yol haritalarının yanı sıra diğer harita türlerini de destekler.

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

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

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

Yapı oluşturulurken mapTypeId ayarlanıyor:

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

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

map.setMapTypeId('terrain');

Haritanın eşleme türünü doğrudan kendiniz ayarlamadığınızı, bunun yerine tanımlayıcıyı kullanarak mapTypeId özelliğini bir MapType öğesine referans verecek şekilde ayarladığınızı unutmayı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 45° özel görüntüleri destekler. Bu yüksek çözünürlüklü görüntüler her bir ana yönün (Kuzey, Güney, Doğu, Batı) doğru perspektifini 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° perspektifi gösterilmektedir:

satellite ve hybrid harita türleri, mevcut olduğunda yüksek yakınlaştırma düzeylerinde (12 ve üstü) 45° görüntüler destekler. Kullanıcı bu tür görüntülerin olduğ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, mevcut konuma odaklanan 45° perspektif sağlayan görüntülerle değiştirilir. 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 değerine ayarlanmadıkça, yakınlaştırma düzeyleri 12 ile 18 arasında yukarıdan aşağıya doğru (0°) varsayılan olarak gösterilir.
    • tilt 0 olarak ayarlanmadıkça, 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 denetimi, kullanıcının yatırmayı açıp kapatmasına ve görünümü herhangi bir yönde 90° artışla döndürmesine olanak tanıyan seçenekler sunar. Döndürme denetimini gizlemek için rotateControl özelliğini false olarak ayarlayın.

45° görüntüler gösteren bir harita türünü uzaklaştırırsanız 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

45° görüntüleri Map nesnesinde setTilt(0) numarasını arayarak devre dışı bırakabilirsiniz. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için setTilt(45) numaralı telefonu arayın. Map's getTilt() yöntemi her zaman harita üzerinde gösterilen mevcut tilt öğesini yansıtır; bir harita için tilt belirledikten sonra tilt öğesini (örneğin, haritayı uzaklaştırarak) kaldırırsanız 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;

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;
Örneği göster

Örneği Dene

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

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

45° görüntüler, her bir ana yöne (Kuzey, Güney, Doğu, Batı) ait görüntülerden oluşur. Haritanızda 45° görüntüler görüntülendiğinde, Map nesnesinde setHeading() çağrısı yaparak ve kuzeyden derece cinsinden ifade edilen bir sayı değerini ileterek görüntüleri ana yol tariflerinden birine doğru yönlendirebilirsiniz.

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

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;

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;
Örneği göster

Örneği Dene

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

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

Harita mapTypeId, bir MapType öğesini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map nesnesi, o harita için kullanılabilir MapType öğelerinin koleksiyonunu içeren bir MapTypeRegistry içerir. Bu kayıt defteri, örneğin Harita Türü kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.

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

Aşağıdaki kod, haritayı harita mapTypeControlOptions içinde yalnızca iki harita türüne gösterilecek şekilde ayarlar ve kayıt defterinde değişiklik yaparak bu arayüzün ilişkilendirmesini MapType arayüzünün gerçek uygulamasına ekler.

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

var MY_MAPTYPE_ID = 'mymaps';

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

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

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

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

Stilli Haritalar

StyledMapType, standart Google temel haritalarının sunulma şeklini özelleştirmenize olanak tanır ve yol, park ve bağlı alan gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stilde gösterecek şekilde değiştirir.

StyledMapType hakkında daha fazla bilgi için stilli haritalar kılavuzuna bakın.

Özel Harita Türleri

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

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

  • Toplu olarak eksiksiz harita haritaları oluşturan resimlerden oluşan standart döşeme grupları. Bu karo grupları, temel harita türleri olarak da bilinir. Bu harita türleri mevcut varsayılan harita türleri gibi davranır ve davranır: roadmap, satellite, hybrid ve terrain. Maps JavaScript API'deki kullanıcı arayüzünün özel harita türünüzü standart harita türü olarak ele alması (örneğin, MapType kontrolüne dahil ederek) için Haritalar'ın mapTypes dizisine özel harita türünüzü ekleyebilirsiniz.
  • Mevcut karo türlerinin üzerinde görünen resim kutusu yer paylaşımı. 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 genellikle belirli konumlar ve/veya yakınlaştırma seviyeleri ile sınırlıdır. Bu blokların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
  • Harita bilgisi görünümünü en temel düzeyinde değiştirebilirsiniz. Resim dışı harita türleri.

Bu seçeneklerin her biri, MapType arayüzünü uygulayan bir sınıfın oluşturulmasına bağlıdır. Buna ek olarak, 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 anlamanız önemlidir. Herhangi bir taban veya bindirme haritası türü 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, geçerli harita görünümü ve yakınlaştırma düzeyinde API blokları göstermesi gerektiğini belirlediğinde, API'nin harita türlerinize istek başlatmasına izin veren belirli özellikleri ve yöntemleri belirtir. Hangi kartları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 bu arayüzü zaten uygulayan ImageMapType sınıfını kullanabilirsiniz.

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

  • tileSize (gerekli) karonun boyutunu (google.maps.Size türünde) belirtir. Boyutlar, kare şeklinde olmasa dikdörtgen olmalıdır.
  • maxZoom (gerekli), bu harita türünün karolarının gösterileceği maksimum yakınlaştırma düzeyini belirtir.
  • minZoom (isteğe bağlı), bu harita türünün karosunu görüntülemek için gereken minimum yakınlaştırma düzeyini belirtir. Bu değer, varsayılan olarak minimum yakınlaştırma düzeyinin olmadığını belirtir. 0
  • name (isteğe bağlı) bu harita türünün adını belirtir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (Aşağıdaki MapType Denetimleri Ekleme konusuna bakın.)
  • alt (isteğe bağlı), fareyle üzerine gelinen metin olarak gösterilen bu harita türü için alternatif metni belirtir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını 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 görüntü alanı için yeni kartlar görüntülemesi gerektiğini belirlediğinde getTile() (zorunlu) çağrılır. getTile() yöntemi aşağıdaki imzaya sahip olmalıdır:

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

    API; MapType, tileSize, minZoom ve maxZoom özelliklerinin yanı sıra haritanın geçerli görüntü alanı ve yakınlaştırma düzeyine göre getTile() çağırmanız gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, karo resminin ekleneceği; iletilen koordinat, yakınlaştırma düzeyi ve DOM öğesine sahip bir HTML öğesi döndürmelidir.

  • releaseTile() (isteğe bağlı), API görünümün dışında kalan bir karoyu kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemde aşağıdaki imzanın bulunması gerekir:

    releaseTile(tile:Node)

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

getTile() yöntemi, belirli bir görüntü alanı içinde hangi kutuların yükleneceğini belirleyen 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 yer paylaşımlı olarak birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu gibi özel MapType'leri, mevcut diğer tüm temel harita türleri (ROADMAP, TERRAIN vb.) gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType öğenizi Map adlı mülkün 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 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;

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;
Örneği göster

Örneği Dene

Yer Paylaşımı Harita Türleri

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

Böyle durumlarda, harita türünün ayrı bir varlık olarak değil, yer paylaşımı olarak değerlendirilmesini istemezsiniz. Bunun için harita türünü Map's overlayMapTypes özelliğini kullanarak doğrudan mevcut bir MapType öğesine ekleyebilirsiniz. Bu özellik, MVCArray / MapType içeriyor. Tüm harita türleri (taban ve bindirme) mapPane katmanında oluşturulur. Yer paylaşımlı harita türleri, eklendikleri 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 eşleme türünün üzerinde bir karo yer paylaşımı MapType 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 {
  tileSize: google.maps.Size;

  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.
  map.overlayMapTypes.insertAt(
    0,
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

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

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;
  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.
  map.overlayMapTypes.insertAt(
    0,
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

window.initMap = initMap;
Örneği göster

Örneği Dene

Resim Haritası Türleri

Temel harita türü olarak hareket etmek MapType için zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri için tek bir resim dosyasından oluşan bloklardan oluşan harita türleri için MapType arayüzünün uygulandığı özel bir sınıf sağlar.

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

  • tileSize (gerekli) karonun boyutunu (google.maps.Size türünde) belirtir. Boyutlar, kare şeklinde olmasa dikdörtgen olmalıdır.
  • getTileUrl (gerekli), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim karolarının 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 ekseninde tekrarlanmasını sağlamak, ancak haritanızın y ekseninde tekrar etmemesini sağlamak için bir normalleştirme işlevi kullanır.

TypeScript

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

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

      if (!normalizedCoord) {
        return "";
      }

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

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

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

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

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

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

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

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

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;
Örneği göster

Örneği Dene

Tahminler

Dünya üç boyutlu bir küredir (yaklaşık olarak), harita ise iki boyutlu düz 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 de düz bir yüzeye yansıtıldığı bir projeksiyondur. En basit şekilde, projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatlarla eşlenmesi olarak tanımlanabilir.

Maps JavaScript API'deki projeksiyonlar Projection arayüzünü uygulamalıdır. Projection uygulaması, yalnızca bir koordinat sisteminden diğerine eşleme değil, iki yönlü eşleme sağlar. Diğer bir deyişle, Earth koordinatlarından (LatLng nesne) Projection sınıfının koordinat sistemine nasıl çevrileceğini tanımmanız gerekir. Tersi de geçerlidir. Google Haritalar, haritalarını 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 MapType taban 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 Kullanma

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

  • Enlem ve boylam koordinatlarını Cartesian uçağıyla eşleme formülü (veya tam tersi). (Projection arayüzü yalnızca dikdörtgen koordinatlara dönüştürmeyi destekler.)
  • Temel karo boyutu. Tüm karolar dikdörtgen olmalıdır.
  • Yakınlaştırma düzeyi 0 olarak ayarlanan temel karoyu kullanan bir haritanın "dünya boyutu". Yakınlaştırma 0'da bir karodan oluşan haritalar için dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.

Projeksiyonlarda Dönüşümleri Koordine Etme

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

  • Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, 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 durumda kullanabilirsiniz: bir dünya haritasını veya yerel bir bölgenin haritasını oluşturmak. İlk durumda, projeksiyonunuzun aynı zamanda tüm boylamlarda dikdörtgen ve normal olduğundan emin olmanız gerekir. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" olabilir (yani kuzey kuzeyde) ancak gerçek kuzeyden sapabilir. Örneğin, harita daha da uzanarak referans boylama göre daha fazla konumlandırılır. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun kesin olmadığını ve dönüşüm hatalarının, sapmanız olan referans boylamdan uzaklaştıkça gitgide daha belirgin hale geleceğini unutmayın.

Projeksiyonlarda Karo Seçimi

Projeksiyonlar yalnızca konumların veya bindirmelerin konumlarını belirlemek için değil, harita karolarının kendisini 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 tanımlamak için bir projection özelliği hem de karo koordinatı değerlerine dayalı olarak harita karolarının alınması için bir getTile() yöntemi belirtmelidir. Karo koordinatları, hem temel karo boyutunuza (dikdörtgen olması gerekir) hem de haritanızın "yakınlık boyutu"na bağlıdır. Bu, harita dünyasının yakınlaştırma düzeyi 0'daki piksel boyutudur. (Yakınlaştırma 0 boyutunda bir karodan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)

Temel karo boyutunu MapType's tileSize mülkünüzde tanımlarsınız. Dünya boyutunu dolaylı olarak fromLatLngToPoint() projeksiyonlarında ve fromPointToLatLng() yöntemlerinde tanımlarsınız.

Görüntü seçimi, bu aktarılan değerlere bağlı olduğundan, bu iletilen değerler (map_zoom_tileX_tileY.png gibi) temel alınarak programatik olarak seçilebilecek resimleri adlandırmak faydalı olur.

Aşağıdaki örnekte, Gall-Peters tahmini 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;

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;
Örneği göster

Örneği Dene