Harita Türleri

Platform seçin: Android iOS JavaScript

Bu dokümanda, Maps JavaScript API. API, MapType kullanır bilgileri barındıracak bir nesne olarak tasarlanmıştır. MapType harita döşemelerinin görüntülenmesini ve kullanımını tanımlayan bir koordinat sistemlerinin ekran koordinatlarından dünyaya çevrilmesi koordinatlarını (harita üzerinde) görebilirsiniz. Her MapType bir kartların ve özelliklerinin alınması ve serbest bırakılması için birkaç yöntem reklam öğelerini inceleyin.

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ürlerine tabidir. Bununla birlikte, sunumun sunumunu da değiştirebilirsiniz Stilli Haritalar'ı kullanan mevcut harita türlerini veya özel harita türlerini kullanarak kendi harita desenlerinizi tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın nasıl değiştirileceğini anlamanız gerekir. Harita Türü Kaydı.

Temel Harita Türleri

Maps JavaScript API'de dört tür harita bulunur. Bildiğiniz "boyalı boyama"ya ek olarak, yol haritası parçaları, 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 uydusunu görüntüler resim.
  • hybrid, normal ve uyduyu karışık olarak gösterir görüntüleme.
  • terrain, araziye dayalı fiziksel bir harita gösterir ekleyebilirsiniz.

Map tarafından kullanılan harita türünü ayarlayarak mapTypeId özelliği (ayar aracılığıyla oluşturucu içinde) veya haritanınMap options setMapTypeId() yöntemi. mapTypeID mülkü varsayılan olarak roadmap değerine ayarlanır.

İnşaat sırasında 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 harita türünü doğrudan ayarlamadığınızı unutmayın. bunun yerine mapTypeId değerini Bir tanımlayıcı kullanarak MapType. Maps JavaScript API bir harita türü kayıt defteri kullanır. aşağıdaki adımları izleyin.

45° görüntüler

Maps JavaScript API, Google Haritalar'daki belirli konumlar. Bu yüksek çözünürlüklü görüntüler, ana yönlerin her birine doğru perspektif görünümleri (Kuzey, Güney, Doğu, Batı). Bu resimler, üst kısımda desteklenen harita türleri için yakınlaştırma düzeyleri.

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

satellite ve hybrid harita türleri 45° değerini destekler (mümkün olduğunda) yüksek yakınlaştırma seviyelerinde (12 ve üzeri) görüntüler. Kullanıcı bulunduğu konumu yakınlaştırdığında, bu harita türleri şu şekilde kendi görünümlerini otomatik olarak değiştirebilir:

  • Uydu veya karma görüntüler, 45°'lik bir açıya sahip olan görüntülerle değiştirilir. perspektifini kullanır. Bu tür görünümler varsayılan olarak olmak üzere ikiye ayrılır. Kullanıcı uzaklaşırsa, varsayılan uydu veya karma görüntüler tekrar görünür. Davranış, yakınlaştırma düzeyine bağlı olarak değişir ve tilt değeri:
    • 12 ve 18 yakınlaştırma seviyeleri arasında yukarıdan aşağı temel harita (0°) değeri tilt değeri 45 olarak ayarlanmadıkça varsayılan olarak kullanılır.
    • 18 veya daha yüksek zum düzeylerinde 45° temel harita, tilt değeri 0 olarak ayarlandı.
  • Döndürme denetimi görünür hale gelir. Döndürme denetimi, kullanıcının yatırmasını ve görünümü 90° döndürebilmesini sağlayan özellikler artar. Döndürme kontrolünü gizlemek için, rotateControl - false.

45° görüntülerin gösterildiği bir harita türünden uzaklaştırma yapıldığında geri dönüş orijinal harita türleri yeniden oluşturuluyor.

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

45° görüntüleri, setTilt(0) Map nesne algılandı. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için setTilt(45) numaralı telefonu arayın. Map adlı çocuğun getTilt() cihazı yöntemi her zaman sayfada gösterilen geçerli tilt harita; haritada tilt ayarlarsanız ve daha sonra bunu kaldırırsanız tilt (örneğin, haritayı uzaklaştırarak), getTilt() yöntemi 0 değerini döndürür.

Önemli: 45° görüntüler yalnızca kafes haritalar; bu görüntüler vektör haritalarıyla kullanılamaz.

Aşağıdaki örnekte New York şehrinin 45° görünümü gösterilmektedir:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;
index.js
.
Örneği inceleyin

Örneği Deneyin

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

45° Görüntüleri Döndürme

45 derecelik görüntüler aslında bir dizi resimden oluşur. her kardina yön için (Kuzey, Güney, Doğu, Batı). Haritanız 45° görüntüler gösteriyorsa, bu resmin konumunu çağırarak buradaki kardinal yönlerinden birine Map nesnesinde setHeading(), başarılı Kuzeyden derece olarak ifade edilen bir sayı değeridir.

Aşağıdaki örnekte havadan harita ve otomatik döndürme gösterilmektedir her 3 saniyede bir harita gösterilir:

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 inceleyin

Örneği Deneyin

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

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

Bir haritanın mapTypeId öğesi dize tanımlayıcısıdır bir MapType öğesini değeri olabilir. Her Map nesnesi, Şu koleksiyonu içeren MapTypeRegistry: MapType olarak kullanılabilir. Bu kayıt mevcut harita türlerini seçmek için kullanılır. eşlemenin diğer ucunda mevcut.

Doğrudan harita türü kaydından okuma yapmazsınız. Bunun yerine özel eşleme türleri ekleyerek ve kayıt defterini ilişkilendirerek seçtiğiniz dize tanımlayıcısını kullanabilirsiniz. Değişiklik yapamazsınız veya temel harita türlerini değiştirin (yine de bunları şuradan kaldırabilirsiniz: ilişkilendirilmiş harita bilgilerinin görünümünü değiştirerek mapTypeControlOptions) bilgileri gösterilir.

Aşağıdaki kod, haritayı yalnızca haritanın mapTypeControlOptions alanında iki harita türü ve ilişkilendirmeyi eklemek için kayıt defterini değiştirir. gerçek uygulamasına MapType arayüzü.

// 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, dokümanın sunumunu özelleştirmenize olanak tanır. bu öğelerin görsel görünümünü değiştirerek, parklar ve yerleşim alanları olarak yeniden tasarlanmış şekilde varsayılan harita türünde kullanılır.

StyledMapType hakkında daha fazla bilgi edinmek için rehbere bakın: stilli haritalar oluşturun.

Özel Harita Türleri

Maps JavaScript API, Google Haritalar'daki özel harita türlerini yönetmenizi ve yönetmenizi sağlar. Bu sayede, kendi harita görüntülerinizi veya karo yer paylaşımlarını kullanabilirsiniz.

Haritalar JavaScript API'si:

  • Şu resimlerden oluşan standart döşeme grupları: tam kartografik haritalar meydana getirmektir. Bu karo gruplar, temel harita türleri olarak da bilinir. Bu harita türleri mevcut varsayılan harita türleri gibi davranın ve davranın: roadmap, satellite, hybrid ve terrain. E-postanızda özel eşleme türünü eşlemek için bir Haritanın mapTypes dizisine Maps JavaScript API'deki kullanıcı arayüzünün özel harita türünüzü standart bir harita türü olarak değerlendirin (HaritaType'a ekleyerek kontrol edebilir.
  • Şunların üzerinde görüntülenen resim karosu yer paylaşımları mevcut temel harita türleri. Genellikle bu harita türleri mevcut bir harita türünü genişletmek için kullanılır. ve genellikle belirli yerlerle sınırlanırlar ve/veya yakınlaştırma seviyeleri çıkarılabilir. Bu blokların şeffaf olabileceğini unutmayın. mevcut haritalara özellik eklemenize olanak tanır.
  • Değişiklik yapmanıza olanak tanıyan resim olmayan harita türleri en temel düzeyde görüntülemek.

Bu seçeneklerin her biri, kullandığınız sınıfa dayalı MapType kullanır. Ayrıca, ImageMapType sınıfı, yerleşik bazı özellikleri basitleştiren gelişmiş bir çalışma ortamıdır.

MapType Arayüzü

MapType uygulayan sınıflar oluşturmadan önce Google Haritalar'ın bütçenizi nasıl belirleyeceğini koordinatlarını verir ve haritanın hangi bölümlerinin gösterileceğine karar verir. Şunları yapmanız gerekir: tüm temel veya yer paylaşımlı harita türleri için benzer bir mantık uygulayabilirsiniz. Harita oluşturma rehberini okuyun karo koordinatlarıyla birlikte çalışır.

Özel harita türleri MapType özelliğini uygulamalıdır kullanır. Bu arayüzde belirli özellikleri ve API'nin haritanıza istek başlatmasını sağlayan yöntemler API, haritayı göstermesi gerektiğini belirlediğinde türler mevcut görüntü alanı ve yakınlaştırma düzeyinde karolara yerleştirilmelidir. Sizin kolunuz hangi karonun yükleneceğine karar verir.

Not: kendi sınıfını kullanabilir. Alternatif olarak uyumlu görüntüler oluşturmak için Şu anda uygulayan ImageMapType sınıfı bu arayüzü kullanın.

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

  • tileSize (zorunlu), karonun boyutunu belirtir (google.maps.Size türünde). Boyutlar dikdörtgen olmalıdır ancak kare olmaları gerekmez.
  • maxZoom (gerekli), maksimum yakınlaştırmayı belirtir bu harita türündeki parçaların görüntüleneceği düzey.
  • minZoom (isteğe bağlı), minimum yakınlaştırmayı belirtir bu harita türündeki parçanın görüntüleneceği düzey. Varsayılan olarak bu değer, minimum değer olmadığını gösteren 0 yakınlaştırma düzeyi var.
  • name (isteğe bağlı) bu haritanın adını belirtir türü. Bu özellik yalnızca bu harita türünü istiyorsanız gereklidir bir MapType kontrolü içinde seçilebilir hale gelecektir. (Bkz. Aşağıdaki MapType Denetimleri ekleniyor.)
  • alt (isteğe bağlı) bunun için alternatif metni belirtir harita türü, fareyle üzerine gelindiğinde gösterilen metin olarak gösterilir. Bu özellik yalnızca gereklidir Bu harita türünün bir MapType kontrolü içinde seçilebilir olmasını istiyorsanız. (Bkz. MapType Denetim Ekleme below.)

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

  • API her zaman getTile() (zorunlu) çağrılır haritanın verilen öğe için yeni karolar görüntülemesi görünüm. getTile() yöntemi aşağıdakileri içermelidir: imza:

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

    API, getTile() öğesini çağırması gerekip gerekmediğini belirler MapType tileSize, minZoom ve maxZoom mevcut görünümü ve yakınlaştırma düzeyini seçebilirsiniz. İşleyici geçilen bir koordinat verildiğinde bir HTML öğesi döndürmelidir. yakınlaştırma düzeyini ve karo resminin ekleneceği DOM öğesini seçin.

  • API her zaman releaseTile() (isteğe bağlı) çağrılır: haritadan çıkan bir karoyu kaldırması gerektiğini belirler. Bu yöntem aşağıdaki imzaya sahip olmalıdır:

    releaseTile(tile:Node)

    Normalde, kaldırma işlemini ekli öğeleri olan, . Örneğin, harita öğesine etkinlik işleyiciler eklediyseniz yer paylaşımlı reklamları buradan kaldırmalısınız.

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

Temel Harita Türleri

Bu şekilde oluşturduğunuz harita türleri ya da yer paylaşımı olarak diğer harita türleriyle birleştirilemez. Bağımsız harita türleri temel harita türleri olarak bilinir. API'den yararlanmak isteyebilirsiniz. bu tür özel MapType'leri mevcut diğer herhangi bir öğe gibi kullan temel harita türü (ROADMAP, TERRAIN vb.). Yapılacaklar Bu nedenle, özel MapType öğenizi Map mapTypes mülkü. Bu özellik bir türde MapTypeRegistry

Aşağıdaki kod, gösterilecek temel bir MapType oluşturur bir haritanın karo koordinatlarının koordinatlarını alır 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 inceleyin

Örneği Deneyin

Bindirme Harita Türleri

Bazı harita türleri, mevcut haritanın üzerinde çalışmak üzere tasarlanmıştır bulunur. Bu tür harita türleri, haritadaki kullanıcılara ek veriler gösterebilirsiniz.

Böyle durumlarda, harita türünün ayrı bir öğe yerine bir yer paylaşımı olarak ele alınmasını istersiniz. Bunu, harita türünü mevcut bir MapType öğesine doğrudan ekleyerek yapabilirsiniz: Map overlayMapTypes özelliği. Bu mülk MapType sn. MVCArray. Tüm harita türleri (ana ve yer paylaşımlı) otomatik olarak oluşturulan mapPane katmanıdır. Yer paylaşımlı harita türleri, görüntüledikleri temel haritanın üstünde ve ek kaynaklar, Map.overlayMapTypes dizisi (daha yüksek endeksli yer paylaşımları değerleri, daha düşük dizin değerlerine sahip yer paylaşımlarının önünde görüntülenir).

Aşağıdaki örnek, öncekiyle aynı dışında bir karo yer paylaşımı oluşturduk MapType ROADMAP harita türünün üzerine:

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 inceleyin

Örneği Deneyin

Resim Haritası Türleri

Temel harita işlevi görmesi için MapType uygulama zaman alıcı ve zahmetli bir iş olabilir. API MapType öğesini uygulayan özel bir sınıf sağlar arayüzü: En yaygın harita türlerinden oluşan harita türleri tek resimli dosyalardan oluşan karolar.

Bu sınıf, ImageMapType sınıfı, bir ImageMapTypeOptions kullanılarak oluşturulur aşağıdakileri tanımlayan nesne spesifikasyonu özellikler:

  • tileSize (zorunlu), karonun boyutunu belirtir (google.maps.Size türünde). Boyutlar dikdörtgen olmalıdır ancak kare olmaları gerekmez.
  • getTileUrl (zorunlu), işlevi belirtir, satır içi işlev değeri olarak sağlanır; seçilen modele göre uygun resim karosu seçimi dünya koordinatlarını ve yakınlaştırma düzeyini etkiler.

Aşağıdaki kod temel bir ImageMapType uygular Google'ın ay karolarını kullanarak. Örnekte bir normalleştirmeden yararlanılıyor karoların x ekseni boyunca tekrarlanmasını ancak bu eksen boyunca tekrarlanmasını sağlama y eksenini seçin.

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 inceleyin

Örneği Deneyin

Tahminler

Dünya üç boyutlu bir küre (yaklaşık olarak). harita, iki boyutlu düz bir yüzeydir. İçinde gördüğünüz harita Maps JavaScript API, Dünya'nın herhangi bir düz haritası gibi, projeksiyonunu oluşturun. En basit haliyle Bu, projeksiyon bir projedeki ilerleme, enlem/boylam değerlerini projeksiyon haritasındaki koordinatlara dönüştürün.

Maps JavaScript API'deki projeksiyonlar, Projection arayüzü. Projection yalnızca tek bir koordinat sisteminde ancak çift yönlü bir harita oluşturma. Diğer bir deyişle, Earth koordinatlarından (LatLng nesne) nasıl çeviri yapılacağını tanımla Projection sınıfına dünya koordinat sistemini ve bunun tersini yapabilirsiniz. Google Haritalar Mercator projeksiyonunu kullanarak haritalarını oluşturabilir ve haritadaki etkinlikleri aşağıdaki etkinliklere dönüştürerek coğrafi koordinatlar. Bu projeksiyonu şu şekilde edinebilirsiniz: Map numaralı telefondan getProjection() aranıyor (veya standart temel MapType türlerinden herhangi biri.) Çoğu kullanım için bu standart Projection yeterli olacaktır, ancak kendi özel projeksiyonlarınızı tanımlayıp kullanabilirsiniz.

Projeksiyon Uygulama

Özel bir projeksiyon uygularken proje yönetimini birkaç nokta:

  • Enlem ve boylam koordinatlarının Kartezyen düzlem (veya tersi). (Projection arayüzü yalnızca doğrusal koordinatlara dönüşümleri destekler.)
  • Taban karo boyutu. Tüm karolar dikdörtgen olmalıdır.
  • "Dünyanın boyutu" yakınlaştırma seviyesi 0'a ayarlanmış ana karoyu kullanarak bir haritanın görüntüsünü seçin. Yakınlaştırma seviyesi 0 olan tek parçadan oluşan haritalar için dünya boyutunun ve taban karo boyutu aynı.

Şurada dönüşümleri koordine edin: Projeksiyonlar

Her projeksiyon, bu ikisi arasında geçiş yapan iki yöntem sunar. koordinasyon sistemleri; coğrafi ve ticari bölgeler arasında dünya koordinatları:

  • Projection.fromLatLngToPoint() yöntemi, aşağıdaki gibi bir dönüşüm sağlar: LatLng değerini dünya koordinatına dönüştürdü. Bu yöntem kullanılır harita üzerinde yer paylaşımlarını konumlandırmak (ve haritanın kendisini konumlandırmak) için kullanılır.
  • Projection.fromPointToLatLng() yöntemi dönüşüm gerçekleştirir dünya koordinatını LatLng değerine dönüştürür. Bu yöntemi, web sitesinde gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlar sağlar.

Google Haritalar projeksiyonların doğrusal olduğunu varsayar.

Projeksiyonu genellikle iki durum için kullanabilirsiniz: dünya haritası oluşturabilir veya yerel bir bölgenin haritasını oluşturabilirsiniz. Önceki senaryoda projeksiyonunuzun da doğrusal ve normal olduğundan emin olmalısınız. görebilirsiniz. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" olabilir (yani, kuzeyi işaret eder) ama gerçek kuzeyden sapmalıdır; bir konuma göre ne kadar ileri doğru konumlandırılıyorsa, referans boylama geçer. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz, projeksiyonun her zaman tam olmayabileceğinin ve dönüşüm hatalardan gittikçe uzaklaştıkça referans boylamı değiştirmelidir.

Projeksiyonlarda Harita Parçası Seçimi

Projeksiyonlar sadece işlerin konumlarını belirlemek için değil ancak harita döşemelerinin kendisini konumlandırmak için kullanılabilir. Maps JavaScript API, temel haritaları MapType kullanarak oluşturur için hem projection özelliği hem de haritanın projeksiyonunu ve bir getTile() değerini tanımlayarak temel alınan harita parçaları alma yöntemi kutu koordinat değerleridir. Parça koordinatları hem temel karo boyutunuz (dikdörtgen olmalıdır) hem de "dünya" boyut" dünyanızın piksel boyutu olan haritanızın boyutu yakınlaştırma seviyesinde 0'a ayarlanır. (Yakınlaştırma düzeyi 0 olan tek bir bloktan oluşan haritalar için, karo boyut ve dünya boyutu aynı olmalıdır.)

Temel karo boyutunu MapType içinde tanımlarsınız tileSize mülkü. Dünyanın boyutunu dolaylı olarak tanımlarsınız projeksiyonunuzun fromLatLngToPoint() dahilinde ve fromPointToLatLng() yöntem.

Resim seçimi bu aktarılan değerlere bağlı olduğundan programatik olarak seçilebilecek görüntüleri adlandırmak için gibi aktarılan değerler map_zoom_tileX_tileY.png

Aşağıdaki örnekte bir ImageMapType her bir arama terimi için Gall-Peters projeksiyonu:

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") as string,
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

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

JavaScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

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

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap,
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;
index.js
.
Örneği inceleyin

Örneği Deneyin