Bu dokümanda, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri açıklanmaktadır. API, bu haritalar hakkındaki bilgileri saklamak için bir MapType
nesnesi kullanır. MapType
, harita karolarının görünümünü ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (haritada) çevirisini tanımlayan bir arayüzdür. Her MapType
, karoların alınmasını ve yayınlanmasını yönetmek için birkaç yöntem ve görsel davranışını tanımlayan özellikler içermelidir.
Maps JavaScript API'deki harita türlerinin iç işleyişi gelişmiş bir konudur. Çoğu geliştirici aşağıda belirtilen temel harita türlerini kullanabilir. Bununla birlikte, Stilli Haritalar'ı kullanarak mevcut harita türlerinin gösterilmesini değiştirebilir veya özel harita türlerini kullanarak kendi karolarınızı tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kayıt Defteri'ni nasıl değiştireceğinizi anlamanız gerekir.
Temel Harita Türleri
Maps JavaScript API'de dört tür harita kullanılabilir. Haritalar JavaScript API'si, bilinen " boyanmış" yol haritası parçalarına ek olarak diğer harita türlerini de destekler.
Maps JavaScript API'de aşağıdaki harita türleri kullanılabilir:
roadmap
, varsayılan yol haritası görünümünü gösterir. Bu, varsayılan harita türüdür.satellite
Google Earth uydu görüntülerini gösterir.hybrid
, normal ve uydu görünümlerinin bir karışımını gösterir.terrain
, arazi bilgilerine dayalı fiziksel bir harita görüntüler.
Map
tarafından kullanılan harita türünü, mapTypeId
özelliğini ayarlayarak veya Map options
özelliğini ayarlayarak ya da haritanın setMapTypeId()
yöntemini çağırarak oluşturucu özelliğini değiştirebilirsiniz. mapTypeID
özelliği varsayılan olarak roadmap
değerine ayarlanır.
mapTypeId
, kurulum sırasında ayarlanıyor:
var myLatlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: myLatlng, mapTypeId: 'satellite' }; var map = new google.maps.Map(document.getElementById('map'), mapOptions);
mapTypeId
öğesini dinamik olarak değiştirme:
map.setMapTypeId('terrain');
Haritanın eşleme türünü doğrudan ayarlamak yerine, mapTypeId
özelliğini bir tanımlayıcı kullanarak MapType
özelliğine referans verecek şekilde ayarlayın.
Maps JavaScript API, bu referansları yönetmek için aşağıda açıklandığı gibi bir harita türü kayıt defteri kullanır.
45° Görüntüler
Maps JavaScript API, belirli konumlar için özel 45° görüntüleri destekler. Bu yüksek çözünürlüklü görüntü, her bir ana yöne (Kuzey, Güney, Doğu, Batı) doğru perspektif sağlar. Bu resimler, desteklenen harita türleri için daha yüksek yakınlaştırma düzeylerinde kullanılabilir.
Aşağıdaki resimde New York şehrinin 45° perspektif görünümü gösterilmektedir:
satellite
ve hybrid
harita türleri, mevcut olduğu durumlarda yüksek yakınlaştırma düzeylerinde (12 ve üzeri) 45° görüntüleri destekler. Kullanıcı bu tür görüntülerin bulunduğu bir konumu yakınlaştırırsa bu harita türleri, görünümlerini aşağıdaki şekilde otomatik olarak değiştirir:
- Uydu veya karma görüntüler, 45° perspektif sağlayan ve mevcut konuma odaklı görüntülerle değiştirildi. Varsayılan olarak bu tür görünümler kuzeye yöneliktir. Kullanıcı uzaklaşırsa varsayılan uydu veya karma görüntüler tekrar görüntülenir. Davranış, yakınlaştırma düzeyine ve
tilt
değerine bağlı olarak değişir: tilt
45 olarak ayarlanmadığı sürece, yakınlaştırma düzeyi 12 ile 18 arasında yukarıdan aşağıya doğru (0°) varsayılan olarak görüntülenir.tilt
0 olarak ayarlanmadıkça, 18 veya daha yüksek yakınlaştırma düzeylerinde 45° temel eşleme görüntülenir.- Döndürme kontrolü görünür hale geliyor. Döndürme kontrolü, kullanıcının eğmeyi açma ve görünümü her iki yönde 90°'lik artışlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için
rotateControl
özelliğinifalse
olarak ayarlayın.
45° görüntüler görüntüleyen bir harita türünden uzaklaştırmak, bu değişikliklerin her birini geri alarak orijinal harita türlerini yeniden oluşturur.
45° Görüntüleri Etkinleştirme ve Devre Dışı Bırakma
Map
nesnesinde setTilt(0)
işlevini çağırarak 45° görüntüleri devre dışı bırakabilirsiniz. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için
setTilt(45)
numaralı telefonu arayın. Map
öğesinin getTilt()
yöntemi, her zaman haritada gösterilen mevcut tilt
değerini yansıtır. Haritada bir tilt
belirleyip daha sonra bu tilt
özelliğini kaldırırsanız (örneğin, haritayı uzaklaştırarak) haritanın getTilt()
yöntemi 0
değerini döndürür.
Önemli: 45° görüntüler yalnızca destek haritalarında desteklenir. Bu görüntüler, vektör haritalarıyla kullanılamaz.
Aşağıdaki örnekte New York şehrinin 45° görünümü gösterilmektedir:
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", } ); map.setTilt(45); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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 Deneyin
45° Dönen Görüntüler
45° görüntüler aslında her bir ana yön için (Kuzey, Güney, Doğu, Batı) bir dizi görüntüden oluşur. Haritanızda 45°
görüntüler görüntülendiğinde,
Map
nesnesinde setHeading()
numarasını çağırarak ve kuzeyden derece cinsinden ifade edilen bir sayı değerini
aktararak görüntüleri ana yönlerden
birine yönlendirebilirsiniz.
Aşağıdaki örnekte havadan bir harita gösterilmektedir ve düğme tıklandığında 3 saniyede bir haritayı otomatik olarak döndürmektedir:
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", heading: 90, tilt: 45, }); // add listener to button document.getElementById("rotate")!.addEventListener("click", autoRotate); } function rotate90(): void { const heading = map.getHeading() || 0; map.setHeading(heading + 90); } function autoRotate(): void { // Determine if we're showing aerial imagery. if (map.getTilt() !== 0) { window.setInterval(rotate90, 3000); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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 Deneyin
Harita Türü Kaydını Değiştirme
Haritadaki mapTypeId
, MapType
öğesini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map
nesnesi, bir harita için kullanılabilir olan MapType
'lerin toplanmasını içeren bir MapTypeRegistry
sunar. Bu kayıt otoritesi, örneğin Haritalar'ın MapType kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.
Doğrudan harita türü kayıt defterinden okumazsanız Bunun yerine, özel harita türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısıyla ilişkilendirerek kayıt defterini değiştirebilirsiniz. Temel harita türlerini değiştiremez veya değiştiremezsiniz (ancak haritayla ilişkili mapTypeControlOptions
görünümünü değiştirerek haritadan kaldırabilirsiniz).
Aşağıdaki kod, haritanın mapTypeControlOptions
haritasında yalnızca iki harita türünü gösterecek şekilde ayarlanır ve kayıt defterini, bu tanımlayıcıyla ilişkilendirmeyi MapType
arayüzünün gerçek uygulamasına ekleyecek şekilde değiştirir.
// Modify the control to only display two maptypes, the // default ROADMAP and the custom 'mymap'. // Note that because this is an association, we // don't need to modify the MapTypeRegistry beforehand. var MY_MAPTYPE_ID = 'mymaps'; var mapOptions = { zoom: 12, center: brooklyn, mapTypeControlOptions: { mapTypeIds: ['roadmap', MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; // Create our map. This creation will implicitly create a // map type registry. map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create your custom map type using your own code. // (See below.) var myMapType = new MyMapType(); // Set the registry to associate 'mymap' with the // custom map type we created, and set the map to // show that map type. map.mapTypes.set(MY_MAPTYPE_ID, myMapType);
Stilli Haritalar
StyledMapType
, standart Google temel haritalarının sunulma şeklini özelleştirmenize olanak tanıyarak yollar, parklar ve inşaat alanları gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stilde yansıtacak şekilde değiştirir.
StyledMapType
hakkında daha fazla bilgi için stil haritaları rehberini inceleyin.
Özel Harita Türleri
Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekler. Böylece kendi harita görüntülerinizi veya karo yer paylaşımlarını uygulamanıza olanak tanır.
Maps JavaScript API'de birkaç olası harita türü uygulaması bulunur:
- Toplu harita görüntülerinin tamamını oluşturan
resimlerden oluşan standart döşeme grupları. Bu karo kümeleri, temel harita türleri olarak da bilinir. Bu harita türleri, mevcut varsayılan harita türleri gibi davranır ve davranır:
roadmap
,satellite
,hybrid
veterrain
. Haritalar JavaScript API'sindeki kullanıcı arayüzünün özel harita türünüzü standart bir harita türü olarak ele alması (örneğin, MapType kontrolüne dahil ederek) için özel harita türünüzü bir Haritalar'ınmapTypes
dizisine ekleyebilirsiniz. - Resim kutusu, mevcut temel harita türlerinin üzerinde görünen yer paylaşımları. Genellikle bu harita türleri, ek bilgi görüntülemek üzere mevcut bir harita türünü genişletmek için kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma seviyeleriyle sınırlıdır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
- Harita bilgilerinin görünümünü en temel düzeyde değiştirmenize olanak tanıyan, görüntü dışındaki harita türleri.
Bu seçeneklerin her biri, MapType
arayüzünü uygulayan bir sınıf oluşturmaya dayanır. Ayrıca ImageMapType
sınıfı, görüntü eşleme türlerinin oluşturulmasını kolaylaştırmak için bazı yerleşik davranışlar sağlar.
MapType
Arayüzü
MapType
özelliğini uygulayan sınıflar oluşturmadan önce, Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerinin gösterileceğine nasıl karar verdiğini anlamak önemlidir. Tüm temel veya bindirme harita türleri için benzer bir mantık uygulamanız gerekir.
Harita ve karo koordinatları kılavuzunu okuyun.
Özel harita türleri MapType
arayüzünü uygulamalıdır. Bu arayüz, API'nin harita parçalarını geçerli görüntü alanı ve yakınlaştırma düzeyinde görüntülemesi gerektiğini belirlediğinde API'nizin harita türlerinize yönelik istekler başlatmasına izin veren belirli özellikleri ve yöntemleri belirtir. Hangi paketin yükleneceğine karar vermek için bu istekleri siz yönetirsiniz.
Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu görüntüleriniz varsa bu arayüzü zaten uygulayan ImageMapType
sınıfını da kullanabilirsiniz.
MapType
arayüzünü uygulayan sınıflar, aşağıdaki özellikleri tanımlamanız ve doldurmanızı gerektirir:
tileSize
(zorunlu) Kartın boyutunu (google.maps.Size
türünde) belirtir. Boyutlar kare biçiminde olmasa da dikdörtgen olmalıdır.maxZoom
(zorunlu) Bu harita türünün karolarının görüntüleneceği maksimum yakınlaştırma düzeyini belirtir.minZoom
(isteğe bağlı), bu harita türünün karosunu görüntülemek için gereken minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak minimum değer,0
değerinin minimum yakınlaştırma düzeyi olmadığını belirtir.name
(isteğe bağlı), bu harita türünün adını belirtir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolü içinde seçilebilmesini istiyorsanız gereklidir. (AşağıdakiMapType
Denetimlerini Ekleme bölümüne bakın.)alt
(isteğe bağlı), fareyle üzerine gelme metni olarak gösterilen bu harita türünün alternatif metnini belirtir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolünde seçilebilmesini istiyorsanız gereklidir. (AşağıdakiMapType
Denetimlerini Ekleme bölümüne bakın.)
Ayrıca, MapType
arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:
-
API, haritanın belirli bir görüntü alanı için yeni kartlar görüntülemesi gerektiğini belirlediğinde
getTile()
(zorunlu) çağrılır.getTile()
yönteminde aşağıdaki imza bulunmalıdır:getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node
API;
MapType
'nintileSize
,minZoom
vemaxZoom
özelliklerine ve haritanın mevcut görüntü alanına ve yakınlaştırma düzeyine göregetTile()
yöntemini çağırmanın gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, karo resmin ekleneceği geçiş koordinatı, yakınlaştırma düzeyi ve DOM öğesine sahip bir HTML öğesi döndürmelidir. -
releaseTile()
(İsteğe bağlı) API, haritanın görünüm dışında kalan bir karoyu kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemde aşağıdaki imza bulunmalıdır:releaseTile(tile:Node)
Genellikle, haritaya ek olarak harita karolarına eklenen tüm öğeleri kaldırmalısınız. Örneğin, karo yer paylaşımlarına etkinlik işleyiciler eklediyseniz bunları burada kaldırmalısınız.
getTile()
yöntemi, belirli bir görüntü alanında hangi karoların yükleneceğini belirlemek için ana denetleyici görevi görür.
Temel Harita Türleri
Bu şekilde oluşturduğunuz harita türleri ya tek başına ya da diğer harita türleriyle yer paylaşımlı olarak birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu gibi özel MapType
öğelerini mevcut diğer temel harita türleri (ROADMAP
, TERRAIN
vb.) gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType
öğenizi Map
öğesinin mapTypes
özelliğine ekleyin. Bu mülk MapTypeRegistry
türündedir.
Aşağıdaki kod, bir haritanın karo koordinatlarını görüntülemek için bir temel MapType
oluşturur ve karoların dış çizgisini çizer:
TypeScript
/* * This demo demonstrates how to replace default map tiles with custom imagery. * In this case, the CoordMapType displays gray tiles annotated with the tile * coordinates. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType { tileSize: google.maps.Size; maxZoom = 19; name = "Tile #s"; alt = "Tile Coordinate Map Type"; constructor(tileSize: google.maps.Size) { this.tileSize = tileSize; } getTile( coord: google.maps.Point, zoom: number, ownerDocument: Document ): HTMLElement { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; div.style.backgroundColor = "#E5E3DF"; return div; } releaseTile(tile: HTMLElement): void {} } function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: 41.85, lng: -87.65 }, streetViewControl: false, mapTypeId: "coordinate", mapTypeControlOptions: { mapTypeIds: ["coordinate", "roadmap"], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, }, } ); map.addListener("maptypeid_changed", () => { const showStreetViewControl = (map.getMapTypeId() as string) !== "coordinate"; map.setOptions({ streetViewControl: showStreetViewControl, }); }); // Now attach the coordinate map type to the map's registry. map.mapTypes.set( "coordinate", new CoordMapType(new google.maps.Size(256, 256)) ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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 Deneyin
Yer Paylaşımlı Harita Türleri
Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür harita türleri, önemli yerleri belirten veya kullanıcıya ek veriler gösteren şeffaf katmanlara sahip olabilir.
Bu tür durumlarda, harita türünün ayrı bir varlık olarak değil, bir yer paylaşımı olarak işlenmesini istersiniz.
Bunun için eşleme türünü Map
öğesinin overlayMapTypes
özelliğini kullanarak mevcut bir MapType
öğesine doğrudan ekleyebilirsiniz. Bu mülkte MVCArray
/ MapType
yer alıyor. Tüm harita türleri (taban ve bindirme) mapPane
katmanı içinde oluşturulur. Yer paylaşımı harita türleri, ait oldukları temel haritanın üzerinde, Map.overlayMapTypes
dizisinde göründükleri sırayla gösterilir (dizin değerleri daha yüksek olan yer paylaşımları, dizin değerleri daha düşük olan yer paylaşımlarının önünde gösterilir).
Aşağıdaki örnek, ROADMAP
eşleme türünün en üst kısmında MapType
karo yer paylaşımı oluşturmamız haricinde önceki örnekle aynıdır:
TypeScript
/* * This demo illustrates the coordinate system used to display map tiles in the * API. * * Tiles in Google Maps are numbered from the same origin as that for * pixels. For Google's implementation of the Mercator projection, the origin * tile is always at the northwest corner of the map, with x values increasing * from west to east and y values increasing from north to south. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType implements google.maps.MapType { tileSize: google.maps.Size; alt: string|null = null; maxZoom: number = 17; minZoom: number = 0; name: string|null = null; projection: google.maps.Projection|null = null; radius: number = 6378137; constructor(tileSize: google.maps.Size) { this.tileSize = tileSize; } getTile( coord: google.maps.Point, zoom: number, ownerDocument: Document ): HTMLElement { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; return div; } releaseTile(tile: Element): void {} } function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: 41.85, lng: -87.65 }, } ); // Insert this overlay map type as the first overlay map type at // position 0. Note that all overlay map types appear on top of // their parent base map. const coordMapType = new CoordMapType(new google.maps.Size(256, 256)) map.overlayMapTypes.insertAt( 0, coordMapType ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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;
Örneği Deneyin
Resim Haritası Türleri
Esas harita türü olarak kullanmak için bir MapType
uygulamak, zaman alan ve zahmetli bir iş olabilir. API, MapType
arayüzünü en yaygın harita türleri için uygulayan özel bir sınıf sağlar: Tek bir resim dosyasından oluşan bloklardan oluşan harita türleri.
Bu sınıf olan ImageMapType
sınıfı, aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions
nesne spesifikasyonu kullanılarak oluşturulur:
tileSize
(zorunlu) Kartın boyutunu (google.maps.Size
türünde) belirtir. Boyutlar kare biçiminde olmasa da dikdörtgen olmalıdır.getTileUrl
(gerekli), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre doğru resim karosunun seçimini işlemek için genellikle satır içi işlev değişmez değeri olarak sağlanan işlevi belirtir.
Aşağıdaki kod, Google'ın ay bloklarını kullanarak temel bir ImageMapType
uygulamaktadır. Örnek, karoların x ekseni boyunca tekrarlanmasını ancak haritanızın y ekseni boyunca tekrarlanmasını önlemek için normalleştirme işlevinden yararlanır.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 0, lng: 0 }, zoom: 1, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ["moon"], }, } ); const moonMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom): string { const normalizedCoord = getNormalizedCoord(coord, zoom); if (!normalizedCoord) { return ""; } const bound = Math.pow(2, zoom); return ( "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" + "/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg" ); }, tileSize: new google.maps.Size(256, 256), maxZoom: 9, minZoom: 0, // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions' radius: 1738000, name: "Moon", }); map.mapTypes.set("moon", moonMapType); map.setMapTypeId("moon"); } // Normalizes the coords that tiles repeat across the x axis (horizontally) // like the standard Google map tiles. function getNormalizedCoord(coord, zoom) { const y = coord.y; let x = coord.x; // tile range in one direction range is dependent on zoom level // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc const tileRange = 1 << zoom; // don't repeat across y-axis (vertically) if (y < 0 || y >= tileRange) { return null; } // repeat across x-axis if (x < 0 || x >= tileRange) { x = ((x % tileRange) + tileRange) % tileRange; } return { x: x, y: y }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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 Deneyin
Tahminler
Dünya üç boyutlu bir küredir (yaklaşık) ve iki boyutlu bir haritadır. Maps JavaScript API'de gördüğünüz harita, dünyanın düz bir haritası gibi, bu kürenin düz bir yüzeye doğru yükseltilmesidir. En basit ifade ile bir projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatlarla eşlenmesi olarak tanımlanabilir.
Maps JavaScript API'deki tahminler Projection
arayüzünü uygulamalıdır. Projection
uygulaması, yalnızca bir koordinat sisteminden diğerine eşleme değil, iki yönlü eşleme de sağlamalıdır. Yani, Dünya koordinatlarından (LatLng
nesne) Projection
sınıfının dünya koordinatı sistemine nasıl çevireceğinizi tanımlamanız gerekir. Google Haritalar, harita verilerini coğrafi verilerden oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu projeksiyonu Map
(veya standart temel MapType
türlerinden herhangi birinde) getProjection()
numaralı telefonu arayarak alabilirsiniz. Çoğu kullanım için bu standart Projection
yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayabilir ve kullanabilirsiniz.
Projeksiyon uygulama
Özel bir projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:
- Enlem ve boylam koordinatlarının Cartesian düzlemine eşlenmesine ilişkin formül. (
Projection
arayüzü yalnızca dikdörtgen koordinatlara dönüştürmeyi destekler.) - Temel karo boyutu. Tüm kartlar dikdörtgen olmalıdır.
- Yakınlaştırma düzeyi 0'da ayarlanan temel karo kullanılarak bir haritanın "dünya boyutu". Yakınlaştırma 0 değerine sahip bir karodan oluşan haritalarda, dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.
Tahminlerde Dönüşümleri Koordine Etme
Her projeksiyonda bu iki koordinat sistemi arasında çeviri yapan iki yöntem bulunur: Coğrafi ve dünya koordinatları arasında dönüşüm yapmanızı sağlar:
Projection.fromLatLngToPoint()
yöntemi,LatLng
değerini dünya koordinatına dönüştürür. Bu yöntem, bindirmeleri harita üzerinde konumlandırmak (ve haritanın kendisini konumlandırmak) için kullanılır.Projection.fromPointToLatLng()
yöntemi, bir dünya koordinatınıLatLng
değerine dönüştürür. Bu yöntem, haritada gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlara dönüştürmek için kullanılır.
Google Haritalar, tahminlerin doğrusal olduğunu varsayar.
Bir projeksiyonu genellikle iki durum için kullanabilirsiniz: bir dünya haritasını veya yerel bir bölgenin haritasını oluşturmak. İlk durumda, projeksiyonunuzun tüm boylamlarda dikdörtgen ve normal olduğundan da emin olmalısınız. Bazı öngörüler (özellikle konik tahminler) "yerel olarak normal" (yani kuzey noktası) olabilir, ancak gerçek kuzeyden sapma gösterebilir. Örneğin, harita biraz daha uzun olduğundan referans boylama göre konumlandırılır. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz, ancak projeksiyonun kesin olarak kesin olmamasına ve dönüşüm hatalarının, sapmakta olan referans boylamına oranla daha belirgin hale geleceğine dikkat edin.
Tahminlerde Harita Kartı Seçimi
Tahminler, sadece konumların veya bindirmelerin konumlarını belirlemek için değil, aynı zamanda harita bloklarının kendilerini konumlandırmak için de yararlı olur.
Maps JavaScript API, temel haritaları bir MapType
arayüzü kullanarak oluşturur. Bu arayüz hem haritanın projeksiyonunu belirlemek için bir projection
özelliği hem de karo koordinat değerlerine dayalı olarak harita karolarını alma için bir getTile()
yöntemi belirtmelidir. Karo koordinatları, hem temel karo boyutunu (dikdörtgen olması gerekir) hem de haritanızın yakınlaştırma seviyesi 0'daki piksel boyutu olan "dünya boyutunu" temel alır. (Zoom 0'da bir karodan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)
Temel karo boyutunu MapType
öğenizin tileSize
özelliği içinde tanımlarsınız. Projeksiyonunuzun fromLatLngToPoint()
ve fromPointToLatLng()
yöntemlerinde dünya boyutunu dolaylı olarak tanımlarsınız.
Görüntü seçimi bu iletilen değerlere bağlı olduğundan, map_zoom_tileX_tileY.png
gibi iletilen değerlerle programatik olarak seçilebilecek resimleri adlandırmak yararlı olur.
Aşağıdaki örnekte, Gall-Peters projeksiyonu kullanılarak bir ImageMapType
tanımlanmaktadır:
TypeScript
// This example defines an image map type using the Gall-Peters // projection. // https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection function initMap(): void { // Create a map. Use the Gall-Peters map type. const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 0, center: { lat: 0, lng: 0 }, mapTypeControl: false, } ); initGallPeters(); map.mapTypes.set("gallPeters", gallPetersMapType); map.setMapTypeId("gallPeters"); // Show the lat and lng under the mouse cursor. const coordsDiv = document.getElementById("coords") as HTMLElement; map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv); map.addListener("mousemove", (event: google.maps.MapMouseEvent) => { coordsDiv.textContent = "lat: " + Math.round(event.latLng!.lat()) + ", " + "lng: " + Math.round(event.latLng!.lng()); }); // Add some markers to the map. map.data.setStyle((feature) => { return { title: feature.getProperty("name"), optimized: false, }; }); map.data.addGeoJson(cities); } let gallPetersMapType; function initGallPeters() { const GALL_PETERS_RANGE_X = 800; const GALL_PETERS_RANGE_Y = 512; // Fetch Gall-Peters tiles stored locally on our server. gallPetersMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom) { const scale = 1 << zoom; // Wrap tiles horizontally. const x = ((coord.x % scale) + scale) % scale; // Don't wrap tiles vertically. const y = coord.y; if (y < 0 || y >= scale) return ""; return ( "https://developers.google.com/maps/documentation/" + "javascript/examples/full/images/gall-peters_" + zoom + "_" + x + "_" + y + ".png" ); }, tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y), minZoom: 0, maxZoom: 1, name: "Gall-Peters", }); // Describe the Gall-Peters projection used by these tiles. gallPetersMapType.projection = { fromLatLngToPoint: function (latLng) { const latRadians = (latLng.lat() * Math.PI) / 180; return new google.maps.Point( GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)) ); }, fromPointToLatLng: function (point, noWrap) { const x = point.x / GALL_PETERS_RANGE_X; const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y)); return new google.maps.LatLng( (Math.asin(1 - 2 * y) * 180) / Math.PI, -180 + 360 * x, noWrap ); }, }; } // GeoJSON, describing the locations and names of some cities. const cities = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [-87.65, 41.85] }, properties: { name: "Chicago" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-149.9, 61.218] }, properties: { name: "Anchorage" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-99.127, 19.427] }, properties: { name: "Mexico City" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-0.126, 51.5] }, properties: { name: "London" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [28.045, -26.201] }, properties: { name: "Johannesburg" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [15.322, -4.325] }, properties: { name: "Kinshasa" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [151.207, -33.867] }, properties: { name: "Sydney" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] }, properties: { name: "0°N 0°E" }, }, ], }; declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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;