1. Başlamadan önce
Bu eğitimde, uygulamanıza 3D işaretçiler ekleme ve bu işaretçilere stil uygulama hakkında bilgi verilmektedir. Ayrıca, belirli konumlara gidip bu konumların etrafında uçarak uygulamanızı nasıl canlandıracağınızı da öğreneceksiniz.
Bu eğitim, ilk codelab'de ele alınan kavramları temel alır. Henüz yapmadıysanız bu uygulama için gereken temel bilgileri edinmek üzere ilgili codelab'i tamamlayın.
Yapacaklarınız
Bu uygulama, Avrupa'daki büyük Google ofislerine genel bir bakış sunar. Kullanıcılar bir ofis seçebilir, keşfetmek için ofisin içinde ve çevresinde uçabilir, ardından genel görünüme dönmek için uzaklaştırabilir. Genellikle seyahat ve keşif uygulamalarında bulunan bu özellikler, kullanıcılara daha etkileyici bir deneyim sunar.
Bu codelab'de, aşağıdakileri yapan bir 3D web uygulaması oluşturacaksınız:
- Maps JavaScript API'yi dinamik olarak yükler.
- Haritaya 3D işaretçiler ekler.
- İşaretçileri SVG'ler kullanarak biçimlendirir.
- İşaretçilere ve işaretçilerin etrafına uçma özelliği eklendi.
- Koddaki konumları bir diziye soyutlar.
Neler öğreneceksiniz?
- İşaretçi işleyiş şekli.
- İşaretçilere stil uygulama.
- Animasyon, yerleşik işlevlerle nasıl çalışır?
- Daha iyi kadraj için kamera konumları yerine nokta konumları kullanma
- Öğeleri daha iyi kadraja almak için kamera parametrelerini yakalamaya yönelik faydalı ipuçları.
Ön koşullar
Bu Codelab'i tamamlamak için buradaki öğelerle ilgili bilgi sahibi olmanız gerekir. Google Haritalar Platformu ile çalışma konusunda bilginiz varsa Codelab'e atlayabilirsiniz.
Zorunlu Google Haritalar Platformu ürünleri
Bu Codelab'de aşağıdaki Google Haritalar Platformu ürünlerini kullanacaksınız:
- Maps JavaScript API
Bu codelab için diğer koşullar
Bu codelab'i tamamlamak için aşağıdaki hesaplara, hizmetlere ve araçlara ihtiyacınız vardır:
- Faturalandırmanın etkin olduğu bir Google Cloud hesabı.
- Maps JavaScript API'nin etkin olduğu bir Google Haritalar Platformu API anahtarı.
- JavaScript, HTML ve CSS hakkında temel düzeyde bilgi
- Dosyaları kaydedip görüntülemek için tercih ettiğiniz bir metin düzenleyici veya IDE.
- Dosyayı çalışırken görüntülemek için bir web tarayıcısı.
2. Hazırlanın
Google Haritalar Platformu'nu ayarlama
Google Cloud Platform hesabınız ve faturalandırmanın etkin olduğu bir projeniz yoksa faturalandırma hesabı ve proje oluşturmak için lütfen Google Haritalar Platformu'nu kullanmaya başlama kılavuzuna bakın.
- Cloud Console'da proje açılır menüsünü tıklayın ve bu kod laboratuvarını kullanmak istediğiniz projeyi seçin.
- Google Cloud Marketplace'te bu kod laboratuvarının çalışması için gereken Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin. Bunun için bu videodaki veya bu dokümanlardaki adımları uygulayın.
- Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümanlardaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.
3. Basit yerküre
Uygulamayı oluşturmaya başlamak için temel kurulumu yapmanız gerekir. Bu işlem, Dünya'nın en temel biçiminde "mavi mermer" görünümünü oluşturur (resimde gösterildiği gibi):
Başlatıcı sayfasının kodunu ekleme
Dünyayı siteye eklemek için sayfanıza aşağıdaki kodu eklemeniz gerekir. Bu işlem, Maps JavaScript API'nin yükleyicisi için bir bölüm ve işaretçilerin kodunu ekleyeceğiniz sayfaya 3D Harita öğesini oluşturan bir init işlevi ekler.
Sayfaya kendi anahtarınızı (Kurulum bölümü'nde oluşturulur) eklediğinizden emin olun. Aksi takdirde 3D öğe başlatılamaz.
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
Bu işlem tamamlandığında, ilgilendiğiniz konumu kadraja almaya hazırsınız. Bunu bir sonraki adımda yapacaksınız.
4. İlk kareyi çerçeveleme
Dünya görünümüne sahip bir harita oluşturduğunuza göre, uygulamanın bir sonraki adımı doğru başlangıç konumunu çerçevelemektir. Bu sayede kullanıcınız, çalıştığı yere anında genel bir bakış atabilir.
Bu örnekte Avrupa'daki Google ofislerine odaklanılmış olsa da bu yaklaşımı dünyanın herhangi bir yerindeki bir ülkeye veya tek bir şehir bloğuna uygulayabilirsiniz. Ürünün hızı ve esnekliği, uygulamanızı minimum kod değişikliğiyle küreselden yerele ölçeklendirmenize olanak tanır.
3D haritanın şu şekilde görünmesi için ilk kadraja alma işlemiyle başlarsınız:
Kamerayı Avrupa'ya doğru çevirin
Görüntünün gösterildiği gibi görünmesi için kamerayı uzayda konumlandırıp yere doğru bakıyormuş gibi doğru şekilde kadraja almanız gerekir.
Bunun için harita kontrolünde bulunan çeşitli parametreler kamera ayrıntılarını ayarlamak için kullanılabilir. Parametrelerin "gerçek" dünyada nasıl etkileşimde bulunduğunu şemada görebilirsiniz. Daha açık belirtmek gerekirse, kameranın baktığı orta nokta ve baktığınız yerden olan mesafe (aralık) vardır. Ayrıca kamera perspektifinin eğimini de ayarlamanız gerekir (aksi takdirde doğrudan Dünya'ya bakmış olursunuz).
Son ayar olan yön, kameranın yönünü belirler. Tam kuzeyden itibaren olan ofset olarak ölçülür. Bu değerler, ilk görüntülemeyi ayarlamak için bir nesne olarak 3D Harita öğesine uygulanır. Bunu, güncellenmiş 3D Öğe kurucusunun bulunduğu kodda görebilirsiniz.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
Kamera yakalama parametreleri
3D haritada bir görünümü kadraja almak için kameranın hassas bir şekilde yerleştirilmesi gerekir. Bu işlemi yalnızca kodla yapmak zor olabilir. Bu süreci basitleştirmek için şu yararlı hileyi kullanın: Sayfanıza, gerekli görünümü tıkladığınızda kamera parametrelerini yakalayan bir işlev ekleyin. Parametreler, konsola gönderilir ve nesnenizin kamera ayarlarına kopyalanmaya hazır olur.
Daha sonra kullanmak isteyebileceğiniz kodu bulabilirsiniz. Kod, gösterilen bu sayfanın örneğine eklenmiştir. Ancak kodlab için gerekli olmadığından sonraki sayfaların örneğinde yer almaz. Daha iyi kamera konumlandırması sayesinde daha etkileyici demolar oluşturmak istiyorsanız bu kodu kullanabilirsiniz.
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
stopCameraAnimation işlevinin kullanımına dikkat edin. Sayfa yakınlaşıyorsa veya yörüngede dönüyorsa o anda ekrandaki konumu yakalayabilmek için animasyonu durdurabilmek yararlıdır. Bu kod bunu yapmanıza olanak tanır. Daha fazla bilgi için stopCameraAnimation dokümanlarını inceleyin.
Konsolda gösterilen, tıklamadan elde edilen örnek çıkış.
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
Kamera metni, 3D Haritalar'daki çeşitli nesnelerde JSON girişi olarak kullanılabilir. İkinci çıkış, tıklamanın gerçekleştiği gerçek nokta konumudur. Bu çıkış, nokta oluşturmak veya işaretçilerin konumlandırılması için de faydalıdır.
Sayfa doğru şekilde çerçevelendiğinde artık işaretçi ekleyebilirsiniz. Bunu nasıl yapacağınızı öğrenmek için bir sonraki adıma geçin.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. Basit işaretçi
Bu bölümde, ilk işaretçinizi nasıl ekleyeceğinizi öğreneceksiniz. Öncelikle işaretçilerle ilgili genel bilgileri öğreneceksiniz.
3D haritalar, Marker3DElement sınıfı ve Marker3DInteractiveElement sınıfı olmak üzere iki farklı işaretçi sınıfı oluşturmayı destekler. Hangi sınıfı seçeceğiniz, işaretçi tıklamalarını etkinleştirmek isteyip istemediğinize bağlıdır. Bunun dışında, bu iki öğe temelde aynıdır. Bu nedenle, önce bir Marker3DElement oluşturup daha sonra sonraki adımlarda bunu Marker3DInteractiveElement olarak "yükselteceksiniz".
Bu adımın çözümünün tamamını burada bulabilirsiniz:
İşaretçilerinizin yüksekliğini ayarlama
İşaretçilerin, 3D Harita'daki diğer tüm öğeler gibi 3D olduğunu bilmek önemlidir. Bu, konumun bir yüksekliğe (rakım) sahip olabileceği ve bu yüksekliğin deniz seviyesine, zemine, ağara göre bir konum olarak temsil edilebileceği veya zemine sabitlenecek ve rakım konumunu yoksayacak şekilde ayarlanabileceği anlamına gelir. Daha fazla ayrıntı için AltitudeMode dokümanının Yükseklik sabitleri bölümünden yararlanabilirsiniz.
İşaretçinin dışa çıkıp çıkmayacağını extruded değerini kullanarak da ayarlayabilirsiniz. Bu ayar, işaretçiye yüksekliğe göre gerçek konumu göstermeye yardımcı olmak için yere doğru küçük bir çizgi çizilip çizilmeyeceğini belirler. Bu, yerdeki noktaları seçmek için kullanışlıdır. Bunun bir örneğini Google Birleşik Krallık konumunda görebilirsiniz. Her ikisi de ekstrüde edilmiş ve konumları mutlak yüksekliğe ayarlanmıştır. İlki 75 metrede, ikincisi 125 metrede.
|
|
Rakım 75 metre. | Rakım 125 metre. |
Engelleme ve çarpışma içeren işaretçileri gizleme veya gösterme
Konumlar birbirinden oldukça uzak olduğu için bu noktaların birbiriyle örtüşmesi veya binaların arkasına düşmesi gibi durumlar gösterimimizde önemli olmayabilir. Ancak collisionBehavior veya drawsWhenOccluded değerlerini kullanarak bu noktalara ne olacağını kontrol edebilirsiniz.
Çarpışma davranışı için aşağıdaki seçenekleriniz vardır:
REQUIRED: (varsayılan) Çarpışmadan bağımsız olarak işaretçiyi her zaman göster.OPTIONAL_AND_HIDES_LOWER_PRIORITYİşaretçiyi yalnızca diğer işaretçilerle örtüşmüyorsa gösterin. Bu türden iki işaretçi çakışırsazIndexdeğeri daha yüksek olan işaretçi gösterilir. AynızIndexdeğerine sahiplerse dikey ekran konumu daha düşük olan görüntü gösterilir.REQUIRED_AND_HIDES_OPTIONALÇarpışmadan bağımsız olarak işaretçiyi her zaman gösterin ve işaretçiyle örtüşecekOPTIONAL_AND_HIDES_LOWER_PRIORITYişaretçilerini veya etiketlerini gizleyin.
İşaretçilerin, tanımlanan çarpışma davranışına göre gösterilme biçimindeki farklılıklar resimlerde gösterilmektedir. REQUIRED ayarı yapılırken tüm işaretçiler gösterilir ancak REQUIRED_AND_HIDES_OPTIONAL kullanırsanız bu durumda ekranın alt kısmındaki işaretçiler gösterilir (isterseniz diğer işaretçilerin en üstte gösterilmesi için zIndex ile oynayabilirsiniz).
|
|
ZORUNLU | REQUIRED_AND_HIDES_OPTIONAL |
Gölgeleme için işaretçilerin binaların arkasına çizilip çizilmeyeceğini seçebilirsiniz. Bu durum aşağıdaki resimde gösterilmektedir. drawsWhenOccluded doğru olarak ayarlandığında, işaretçiler binaların arkasına çizildiğinde biraz karartılmış olarak gösterilir. Yanlış olarak ayarlandığında ise işaretçiler binaların arkasına çizildiğinde gizlenir. Daha fazla bilgiyi aşağıdaki tabloda bulabilirsiniz:
|
|
|
|
Belirtildiği gibi, örtülmüş işaretçilerin çizilmesine izin verilirse çarpışma nedeniyle gizlenen işaretçiler karartılmış olarak gösterilir. Resimde, işaretçilerin bir kısmının binalar, bir kısmının da diğer işaretçiler tarafından gizlendiğini görebilirsiniz.
Daha fazla bilgi için 2D haritadaki collision-behavior örneğine bakın.
Tuvali temizleme
Şimdi ilk işaretçinizi oluşturmanın zamanı. Kullanıcının işaretçilere odaklanmasını sağlamak için 3D haritada varsayılan etiketleri devre dışı bırakabilirsiniz.
3D harita öğesinin mode değerini SATELLITE olarak ayarlayın.
Daha fazla bilgi için mod konusuna bakın.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
Bu işlem sonucunda aşağıdaki 3D harita oluşturulur:
İlk işaretçiyi ekleme
Temiz bir kanvasla artık ilk işaretçiyi ekleyebilirsiniz. Anahtar parametreler arasında konum ve etiket bulunur.
İşaretçi eklemek için işaretçinin konumunu ayarlayın. İşaretçinin üzerinde görünen bir etiket ve Marker3DElement dokümanlarında açıklanan diğer öğeleri de ekleyebilirsiniz.
İşaretçimizi eklemek için varsayılan etiketleri gizleyen satırdan sonra aşağıdaki kodu ekleyin:
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
İşaretçiyi oluşturduktan sonra, ekle yöntemini kullanarak 3D haritaya ekleyin. İşaretçilerin, 3D harita içinde bir alt öğe dizisi olarak depolandığını unutmayın. İşaretçileri değiştirmek için bu dizi aracılığıyla erişmeniz gerekir.
API'yi yüklerken Marker3DElement'yi kitaplıklar listesine ekleyerek Maps JavaScript API'den yüklenmesini sağlayın.
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
Artık sayfa yüklendiğinde, Londra ofisinin üzerinde bir işaretçiyle birlikte Avrupa'nın tamamı görünür. Animasyonda gösterildiği gibi, oluşturulan konumun üzerindeki işaretçiyi görmek için manuel olarak yakınlaştırabilirsiniz.
İlk işaretçinizi yüklediğinize göre bir sonraki adım, işaretçiyi daha güzel hale getirmektir.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
<!DOCTYPE html>
<html>
<head>
<title>Step 3 - Simple Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. SVG işaretçisi
Bu adımda, bulunduğu ülkeyi temsil edecek bir bayrak ekleyerek işaretçiyi değiştirerek daha güzel görünmesini sağlayacaksınız. Bunun nasıl yapıldığını görelim. Bunun için PinElement ile tanışmanız gerekir.
Sonuç olarak, aşağıdaki gibi yeni bir görünüm elde edersiniz:
PinElement ile temel özelleştirme
2D veya 3D haritalar olsun, JavaScript API'de işaretçiler arasında paylaşılan öğelerden biri PinElement'tir. Map3DElement öğesine bir Marker3DElement eklerken Marker3DElement öğesine alt öğe olarak bir PinElement eklersiniz.
PinElement, normal işaretçiyi kenarlık rengi, iç nokta (veya simge) rengi ve arka plan rengi ayarlamak için temel düzeyde değiştirme olanağı sunar. Bunları, 2D işaretçiyi gösteren resimde görebilirsiniz.
Ölçek değerini ayarlayarak da öğe üzerinden işaretçi boyutu belirleyebilirsiniz (>1 normalden büyük, <1 ise oran olarak daha küçüktür).
Daha özel bir görünüm vermek ancak standart PinElement harita iğnesi görünümünü korumak istiyorsanız simgeyi bir resim veya svg dosyasıyla da değiştirebilirsiniz.
PinElements'in ötesinde
Bu adımda, standart PinElement işaretini svg bayrağı ve farklı renklerle güncelleyeceksiniz. Ancak işaretin görünümünü tamamen değiştirerek harita iğnesi gibi bile görünmemesini sağlayabileceğinizi de unutmayın. İşaretçiye HTMLImageElement ve SVGElement gibi şablonlar kullanarak yeni grafikler de ekleyebilirsiniz. Bunu yapma hakkında daha fazla bilgiyi Marker3DElement-Slots dokümanında bulabilirsiniz.
Nelerin mümkün olduğunu görmek için çeşitli teknikler kullanılarak işaretçilere stil verme örneklerini gösteren aşağıdaki örneklere göz atın.
|
|
PinElement aracılığıyla temel özelleştirmeye sahip işaretçiler için örneklere bakın. | Şablon, SVG ve resimler aracılığıyla karmaşık özelleştirmeye sahip işaretçiler. Örneklere bakın. |
Şunu ekleyin: PinElement
İşaretçinin görünümünü değiştirmek için ilk olarak PinElement kitaplığının sayfaya eklendiğinden emin olmanız gerekir. Bu işlem, maps3d kitaplığı içe aktarıldıktan sonra aşağıdaki kod satırı eklenerek yapılır:
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
Öğe yüklendikten sonra PinElement'e referans verilebilir ve PinElement oluşturulabilir. Koda bakın, işaretçinin oluşturulduğu yere ekleyin ve işaretçiyi 3D haritaya ekleyin.
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
Yalnızca temel bir raptiye yüklemediğiniz için PinElement'i ilişkili arka plan rengi ve ölçeğiyle ayarlamanın ötesinde yapılması gereken bir dizi işlem vardır.
Öncelikle, bayrak simgesi için bir svg resmi referansı (bu durumda Birleşik Krallık bayrağı) oluşturulmalıdır. Bu tür simgelerin bulunduğu koleksiyonlara https://flagicons.lipis.dev/ adresinden ulaşabilirsiniz.
Simgeyi, sitenin bulabileceği bir yere yerleştirebilirsiniz. Bu durumda, resmin konumunu sabit kodlayabilir veya burada temel değişkenle gösterildiği gibi, dizinin taslağı olarak mevcut site konumunu kullanabilirsiniz. Ardından, bunu sunucudaki konuma, doğru işarete bağlayabilirsiniz. Burada bu konum '/images/gb.svg' altındadır.
Bu işlem, aşağıdakine benzeyen bir PinElement oluşturur:
Böylece, işareti ve kodu doğru yere yerleştirdikten sonra şuna benzeyen bir 3D haritanız olur:
İşaretçimiz artık hazır. Etkileşimin eklenmesi için tıklanabilir hale getirmek üzere de değiştirilebilir. Bu işlem sonraki adımda yapılacaktır.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
Ayrıca, bayrak svg (veya tercih ettiğiniz png dosyası) dosyasını alıp sayfanız tarafından bulunabilecek bir dizinde saklamanız gerektiğini unutmayın (burada resimler klasöründe depolanmıştır).
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. Etkileşimli işaretçi
Son adımda sayfaya bir işaretçi eklendi ancak bu işaretçi, güzel görünmenin dışında pek bir işe yaramaz ve 3D Harita ile etkileşimde bulunma şekliniz değişmez. Sonraki adımda, tıkladığınızda işaretçiyle bir işlem yapma özelliğini ekleyerek işaretçinin kullanıcı etkileşimine tepki vermesini sağlayın.
Bu özelliğin eklenmesi için Marker3DElement öğesini Marker3DInteractiveElement öğesine dönüştürmeniz gerekir. Sonuç olarak, benzer görünümlü bir sayfa elde edersiniz ancak bu sayfadaki işaretçi tıklandığında artık şuna benzer bir uyarı gösterilir:
Önce işaretçi sınıfını değiştirin
Bir işaretçiye etkileşim eklemek için doğru sınıfın kullanıldığından emin olmanız gerekir. Marker3DInteractiveElement gerekli olan sınıftır ancak Marker3DElement'in bir uzantısı olduğu için yeni sınıfı yüklemek ve oluşturucuda sınıf adını değiştirmek dışında hiçbir şey yapmanız gerekmez.
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
İkinci olarak, tıklama etkinliğini işaretçiye ekleyin.
Ardından, kullanıcı etkileşimini işlemek ve yanıt vermek için işaretçiye bir tıklama etkinliği ekleyin. Snippet'te, tıklama etkinliğinin işaretçiye eklendiğini görebilirsiniz. Bu durumda bir uyarı tetiklenir ve işaretçideki etiketi gösteren metin açılır. Bu metin, etiket mülküne erişmemizi sağlayan, tetiklenen etkinliğin hedefinden elde edilir. İşaretçi oluşturulduktan hemen sonra uygulamanıza aşağıdaki kodu ekleyin.
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
stopPropagation etkinliğinin, yığıntaki diğer tıklama dinleyicilerinin 3D Harita ana kanvası gibi temel nesnelerde tetiklendiğinden emin olmak için kullanıldığını unutmayın.
Bu nedenle, uygulamanızı çalıştırdığınızda aşağıdaki sonucu alırsınız:
İşaretçi tıklandığında bir işlem yapma özelliği sayesinde, bir sonraki adımda sayfaya animasyon ekleyebilirsiniz.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. Git
Bu adımda, animasyon eklemek için işaretçiyi tıklayarak konumuna uçabilirsiniz. Bu özelliğin işleyiş şeklini burada görebilirsiniz.
flyCameraTo ile animasyon oluşturma
Bunu sayfaya eklemek için 3D Haritalar'ın flyCameraTo yöntemini kullanırsınız. Bu yöntemde kamera, bulunduğunuz kamera konumu ile görüntülemek istediğiniz kamera konumu arasında animasyonlu bir şekilde hareket eder, iki konum arasında interpolasyon yapar ve uçuşu 3D Haritalar'da animasyonlu olarak gösterir.
flyCameraTo işlevini kullanırken FlyToAnimationOptions'ı belirtmeniz gerekir. Bu seçenek iki özelliğe sahiptir: endCamera, animasyonun sonunda kameranın bakması gereken konumdur ve durationMillis, geçişin gerçekleşmesi için gereken süredir (milisaniye cinsinden).
Örnekte, kamerayı 65 derece eğim, 500 metre menzil ve 0 derece yönle işaretçi konumu olan binaya bakacak şekilde ayarlayın. Animasyon zamanlamasını 12.500 milisaniye (12,5 saniye) olarak ayarlayın.
Sayfadaki mevcut uyarı etkinliğini flyCameraTo snippet'iyle değiştirin:
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
Artık sayfayı yenileyip işaretçiyi tıklayarak animasyonda gösterildiği gibi Google Birleşik Krallık'a gidebilirsiniz:
Bu adımda, kamerayı işaretçinin konumuna götüren tıklanabilir bir işaretçi eklediniz. Sonraki adımda, kamerayı noktanın etrafında uçurarak konumun yörüngesinde dönmesini sağlayacaksınız.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. Uçma
Animasyonumuzun son öğesi, binanın etrafında yörünge animasyonu oluşturmak için flyCameraAround yöntemini kullanmaktır. Sonuç olarak, binaya uçup animasyonda gösterildiği gibi etrafında uçan bir animasyon elde edersiniz. Bu, gerçek bir örnek için biraz hızlı olabilir ancak işlemin nasıl çalıştığını göstermek için faydalıdır. Çok uzun olmadan, sizin için uygun bir değer elde edene kadar zamanlamalarla oynayabilirsiniz.
Uçalım.
flyCameraAround yöntemi, kameranın hangi konumun etrafında döneceğini, kamera parametrelerini ve yörüngede dönmenin milisaniye cinsinden süresini kontrol eden bir dizi seçenek almasıyla flyCameraTo işlevine benzer. Son olarak, belirtilen sürede gerçekleşebilecek rotasyon sayısını da belirtebilirsiniz. Tüm seçenekleri FlyAroundAnimationOptions içinde görebilirsiniz.
Ama bir dakika bekleyin!
Animasyonda, animasyonların konuma uçtuğunu ve ardından animasyon zinciri oluşturarak etrafında uçtuğunu görebilirsiniz. Bunu yapmak için, bir sonraki animasyon tetiklenmeden önce mevcut animasyonun bittiğinden emin olmak üzere 3D Haritalar gmp-animationend etkinliğini kullanırsınız. Bu animasyon, durdurulmadan önce yalnızca bir kez gerçekleşmelidir.
Kodu inceleyin ve önceki bölüme eklenen kodun sonuna ekleyin.
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
gmp-animationend etkinliğini dinleme özelliğini eklemek, flyCameraAround etkinliğini tetiklemesine olanak tanır. Başlangıç noktasını, uçma yönteminin bitiş kamerası için kullanılanla aynı olacak şekilde ayarlamak, yumuşak bir geçiş anlamına gelir (böylece yeni konumda sarsıntılı hareketler oluşmaz). Yine durationMillis, animasyonun yapılması için geçen süreyi kontrol edecek şekilde ayarlanır. Bu durumda yöntem, rounds adlı başka bir seçenek de alır ve bu seçenek 1 olarak ayarlanır.
Bu, kameranın 5 saniyede bir noktanın etrafında döneceği anlamına gelir. Size en uygun sayıyı bulmak için bu değerlerle denemeler yapabilirsiniz.
Bu noktada animasyon sona erer ancak gmp-animationend etkinliğinin bu kod parçasıyla tekrar tetiklenmesini istemezsiniz. Aksi takdirde yörünge sonsuz olarak gerçekleşir. Bunu önlemek için dinleyiciye bir kez ayarının doğru değerine eşit olduğu bir seçenek sunabilirsiniz. Bu, sonsuz döngüden kaçınmak için etkinliğin tamamlandıktan sonra kaldırılacağı anlamına gelir.
Bu eklendikten sonra çözümü çalıştırabilir ve animasyonda gösterildiği gibi animasyonu sonunda işaretçinin etrafında uçarken görebilirsiniz:
Bu adımda, tıklanabilen bir işaretçi eklemiş olursunuz. Ardından kamera, işaretçi konumuna ve etrafına uçar. Sonraki aşamada daha fazla nokta eklemeye ve bunlar arasında geçiş yapmamıza izin vermeye başlayın.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. Paris!
Londra harika bir şehir olsa da sayfadaki tek yer olduğu için biraz yalnız görünüyor. Bu nedenle, Paris'ten başlayarak yeni yerler eklemeye başlayalım. Bunu yapmak için konuma özgü tüm ayrıntıları içeren bir dizi kullanılabilir ve ardından bu dizi, işaretçi görüntüleme parametrelerini ve kamera konumlarına gidip kamera konumlarının etrafında dönme işlemlerini ayarlayan işlevler ve değişkenler için giriş olarak kullanılabilir. Örneğin, bir binanın daha iyi bir kamera çekimi için işaretçi noktası konumundan farklı olması gerekebilir.
Konum dizisi
Belirli bir konumla ilgili tüm ayrıntıları (ör. görüntüleme kamerası, işaretçi noktası ve görüntüleme seçenekleri) sabit kodlamak zorunda kalmamak için bu verileri saklamak üzere küçük bir JSON nesnesi dizisi kullanabilirsiniz. Bu, işaretçiler oluşturulup uygulamada kullanıldığında uygulanabilir. Bu örneği kod snippet'inde görebilirsiniz. Burada diziyi tutmak için officeLocations adlı bir değişken oluşturulur.
Aşağıdaki kodu init işlevinin hemen önüne ekleyin. Ayrıca, base değişkeninin tüm ofis konumlarına uygulanabilmesi için init işlevinin dışına taşındığını unutmayın.
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
Her ofis konumunun aşağıdaki özellikleri vardır:
- ad : Konumun adı.
- camera : Uçacağınız ve etrafına bakacağınız konumu görmenizi sağlayan ilk görünüm.
- point : İşaretçinin yerleştirileceği konum.
- pin : İşaretçi iğnesi renginin ve simge özelliklerinin ayrıntıları
Farklı bir açı
Burada, Birleşik Krallık için kamera merkezinin ve işaretçi noktasının (rakım dışında) aynı olduğunu, Fransa için ise kameranın ve noktanın farklı olduğunu fark edebilirsiniz. Bunun nedeni, Fransa'daki konum için işaretçinin ilk kamera görüntüsünden farklı bir konumda olması gerektiğidir. Bu, uçarken ve etrafında dolaşırken binanın tamamının, işaretçi noktası kullanıldığı takdirde sağlanabilecekten daha iyi bir görünümünü sağlar.
Avrupa'ya geri dönme
Daha fazla noktaya sahip olmanın bir işlevi, bunlar arasında geçiş yapabilme şartı eklemesidir. Seçim yapmak için bir açılır menü kullanabilirsiniz ancak bu örnekte kamera, kullanıcının başka bir konum seçmesine izin vermek için her seferinde Avrupa görünümüne geri döner.
Bunun için ilk görünümün, kamerayı Avrupa'nın tamamına bakacak şekilde sıfırlamak için kullanılabilecek bir değişkende saklanması gerekir. Bu örnekte, daha sonra kullanmak üzere europeCamera adlı yeni bir değişken ekleyin.
init işlevini güncelleme
Yapmanız gereken ilk düzenleme, Map3DElement oluştururken europeCamera nesnesini giriş olarak kullanmanızdır.
Yapmanız gereken ikinci düzenleme, işaretçi oluşturma bölümünü değişkenlerde depolanan parametrelerle güncellemek için döngüye sarmalamaktır. Bu değişiklikleri gösterilen kodda görebilirsiniz:
- office.point : İşaretçi konumu.
- office.name : İşaretçinin etiketi için kullanılan ofis adı.
- office.camera : İlk kamera konumu.
- office.pin : Görüntüleme farklılıkları için PinElement seçenekleri
Ayrıca Fransız bayrağı için bir SVG dosyası veya resim almayı unutmayın.
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
Depolanan europeCamera değişkenini kullanarak Avrupa görünümüne geri uçmayı işlemek için flyCameraAround animasyonundan sonra ikinci bir gmp-animationend işlevinin eklendiğini unutmayın. Animasyonda gösterildiği gibi:
Bu aşamada uygulama, iki konuma ve animasyon ile konum dizisi kullanarak bunlar arasında uçma olanağına sahip olacak şekilde genişletildi. Sonraki aşamada, ofis konumlarının geri kalanı diziye eklenir.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
Ayrıca, bayrak svg'lerini (veya tercih ettiğiniz png dosyalarını) indirip sayfanızda bulunabilecek bir dizinde saklamanız gerektiğini unutmayın (burada resimler klasöründe depolanmıştır).
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. Diğer yerler
Uygulama artık gerekli tüm özelliklere sahip olsa da 3D harita biraz seyrek görünüyor. Bu nedenle, haritayı biraz daha yoğun hale getirmek için birkaç konum daha ekleyeceğiz. Bir dizi kullanarak yeni konumları kendi benzersiz işaretçileriyle doldurmaya devam etmek kolaydır. Son adım, aşağıdaki görünüme ulaşana kadar işaretçi eklemeye devam etmektir.
Daha fazla işaretçi ekleme.
Google'ın Avrupa'daki birçok ülkede ofisi bulunmaktadır. Bunlardan bazılarını haritaya ekleyelim. Tek yapmanız gereken diziyi güncellemektir. Bu, bir web hizmetinden alınabilir veya bir yerdeki statik bir dosyadan yayınlanabilir. Bizim durumumuzda, basitlik açısından aynı sayfada tutulur.
İstediğiniz kadar işaretçi ekleyebilirsiniz. Bu işaretçiler sayfa tarafından alınır ve ardından görünüme otomatik olarak eklenir. Doğru işaretleri alıp resimler dizininde (veya uygun olan başka bir yerde) saklamayı unutmayın.
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
Bunu yaptıktan sonra, gösterilen resimdeki gibi eksiksiz bir sayfa göreceksiniz. Bu sayfa, kullanıcının herhangi bir konumu tıklayıp oraya uçmasına, etrafında uçmasına ve ardından geri çıkmasına olanak tanır.
Tebrikler, kod laboratuvarını tamamladınız. Bir sonraki bölümde bu deneyimi sonlandırıp denemek için başka yeni şeylere bakalım.
Bölüm çözümü
Bu adımda, uygulamanızı doğrulamak için çözüm olarak tamamlanmış sayfa sağlanır. (Kopyalıyorsanız kendi API anahtarınızı kullandığınızdan emin olun).
Ayrıca, bayrak svg'lerini (veya tercih ettiğiniz png dosyalarını) almanız ve sayfanızda bulunabilecek bir dizinde saklamanız gerektiğini unutmayın (burada resimler klasöründe depolanmıştır).
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. Sonraki Adımlar
Bu codelab'de, Maps JavaScript API'deki 3D ile neler yapabileceğinizle ilgili temel bilgileri ele aldınız. Ardından, haritaya aşağıdaki özelliklerden bazılarını eklemeyi deneyin:
- Ofis seçimine izin vermek için bir açılır liste ekleyin.
- Daha fazla parlaklık göstermek için diğer işaretçi stili seçeneklerinden bazılarını kullanın.
- Maps JavaScript API için sunulan ve ek özellikler sağlayan ek kitaplıklara göz atın. Örneğin, her ofisin puanını yer kimliğini kullanarak göstermek için Yerler'i kullanabilirsiniz.
Web'de Google Haritalar Platformu ve 3D ile çalışmanın diğer yollarını öğrenmek için aşağıdaki bağlantılara göz atın: