Maps JavaScript'teki 3D Haritalar, etkileyici 3D harita deneyimleri oluşturmanıza yardımcı olur. Harita stilini özelleştirme, erişilebilirliği iyileştirme ve kullanılabilirliği artırma araçları sunarak ilgi çekici ve etkileşimli uygulamalar geliştirmenize olanak tanır.
Maps JavaScript API'deki 3D haritalarla yapabileceklerinize bir örnek:
Maps JavaScript'te neden 3D haritalar kullanılmalı?
Maps JavaScript'teki 3D Haritalar, maps3d kitaplığında Map3DElement (<gmp-map-3d>) sınıfını sağlar. Böylece Google'ın 3D görüntülerini uygulamalarınızda kullanabilirsiniz. 3D haritalar, yerleşik bir 3D oluşturma deneyimi sunarak 3D gerçek dünya ortamlarını, şehir görünümlerini ve önemli yer turlarını dahil etmenize veya denemenize olanak tanır.
3D arazi, kamera eğimi, yön ve menzil uçuşları, ekstrüzyonlu 3D binalar ve Marker3DElement (<gmp-marker-3d>) gibi 3D nesneler için 3D <gmp-map-3d> (maps3d kitaplığında Map3DElement) kullanın. Düz 2D yol haritaları, standart 2D AdvancedMarkerElement raptiyeleri ve 2D vektör stili için 2D <gmp-map> (maps kitaplığında MapElement veya google.maps.Map) kullanın.
Maps JavaScript API'deki 3D haritalarla neler yapabilirsiniz?
- Gerçek dünya harita deneyimleri oluşturun:
SATELLITEveyaHYBRIDmodunda (temel harita etiketlerini uydu görüntülerinin üzerine yerleştirir) şehirlerin, arazilerin ve önemli noktaların fotoğraf gerçekliğinde 3D havadan görüntülerini oluşturun ya damodeözelliğini kullanarakROADMAPmodunda stillendirilmiş bir 3D temel harita görüntüleyin. Daha fazla bilgi için Harita modunu değiştirme başlıklı makaleyi inceleyin. - Haritanın stilini özelleştirme:
- 3D bulut tabanlı harita stilleri: Temel haritadaki önemli yerlerin (ÖY) ve yolların görünürlüğünü ve stilini kontrol edin. Daha fazla bilgi için 3D haritaları özelleştirme başlıklı makaleyi inceleyin.
- Özel işaretçiler, popover'lar, çoklu çizgiler ve çokgenler:
MarkerElement,Marker3DElement,Marker3DInteractiveElement,PopoverElement,Polyline3DElementvePolygon3DElementkullanarak konumları belirleyin ve harita üzerinde 3D rotalar veya sınırlar çizin. Daha fazla bilgi için İşaretçiler, Pop-over'lar ve Şekiller ve çizgiler bölümlerini inceleyin. - 3D modeller ve glTF öğeleri:
Model3DElementkullanarak binaların, önemli yerlerin veya nesnelerin özel PBR glTF 3D modellerini gerçek dünya koordinatlarına ekleyin. Daha fazla bilgi için Modeller bölümüne bakın.
- Sürükleyici haritalar oluşturun:
- Önceden ayarlanmış kamera yolları:
flyCameraToveflyCameraAroundkullanarak önceden tanımlanmış kamera uçuşları ve yörünge animasyonlarıyla kullanıcıları 3D haritanızda yönlendirin. Daha fazla bilgi için Kamera yollarına animasyon ekleme başlıklı makaleyi inceleyin. - Kullanıcı etkileşimini kontrol etme: Kullanıcılarınıza sunulan kontrolleri ve kamera hareketini özelleştirin. Daha fazla bilgi için 3D harita kontrolleri ve keşif, Kamera görünümünü ve sınırlarını kısıtlama ve Kameranın konumunu kontrol etme başlıklı makaleleri inceleyin.
- Önceden ayarlanmış kamera yolları:
Kısa bir örnek
maps3d kitaplığını yüklemek ve <gmp-map-3d> öğesini mode="HYBRID", center (lat,lng,altitude), range, tilt ve heading ile oluşturmak için aşağıdaki snippet'i kullanın:
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
YOUR_API_KEY kısmını Google Haritalar Platformu API anahtarınızla değiştirin.
Maps JavaScript'te 3D Haritalar'ı kullanma
| 1 | Kurulumu tamamlama | JavaScript API'yi ayarlama ile başlayın ve ardından gelen kurulum talimatlarını tamamlayın. |
| 2 | Maps JavaScript API'nin faturalandırma şeklini anlama | Bilgi için Kullanım ve faturalandırma başlıklı makaleyi inceleyin. |
| 3 | Harita oluşturma | Daha fazla bilgi için Başlayın bölümüne bakın. |
Kapsam
Fotoğraf gerçekliğinde 3D bina ve önemli yer mesh'leri, desteklenen ülkeler ve bölgelerdeki belirli metropol alanlarında kullanılabilir. 3D mesh kapsamı olmayan bölgelerde (ör. Hindistan), <gmp-map-3d>, 3D binalar olmadan 3D arazi yüksekliğinin üzerine yerleştirilmiş 2D uydu veya yol haritası görüntülerini oluşturur. 3D mesh kapsamı olmayan bir alandaki önemli bir yeri sergilemek için Model3DElement kullanarak koordinatlarına özel bir glTF 3D model yerleştirebilir veya 2D <gmp-map> kullanabilirsiniz. Ülkelere göre kullanılabilirlik durumu için (Maps JavaScript 3D sütununda) Google Haritalar Platformu Kapsam Ayrıntıları'na bakın.
Sonraki adımlar
- "Hello, World!" uygulaması oluşturmak için Başlangıç kılavuzuna göz atın. 3D harita.
- Haritaya nasıl özellik ekleyeceğinizi öğrenmek için giriş niteliğindeki codelab'i deneyin.
- Bir sonraki codelab'de işaretçiler ve animasyonlar hakkındaki bilgilerinizi genişletin.
- Kullanım alanınıza uygun bir örnek bulmak için Google'ın örnek koleksiyonuna göz atın.