معرفی Places UI Kit : یک کتابخانه اجزای آماده و کم هزینه که به شما امکان می دهد رابط کاربری آشنای Google Maps for Places را به هر نقشه ای که انتخاب می کنید بیاورید. آن را امتحان کنید و نظرات خود را برای کمک به شکل دادن به آینده GMP به اشتراک بگذارید!

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

نشانگرها و انیمیشن را به نقشه سه بعدی فوتورئالیستی اضافه کنید

1. قبل از شروع

این آموزش نحوه افزودن و سبک دادن به نشانگرهای سه بعدی را در برنامه خود بررسی می کند. همچنین یاد خواهید گرفت که چگونه برنامه خود را با پرواز به مکان‌های خاص و اطراف آن متحرک کنید.

این آموزش مبتنی بر مفاهیمی است که در اولین کد لبه پوشش داده شده است. اگر قبلاً این کار را نکرده‌اید، آن لبه کد را تکمیل کنید تا دانش اساسی مورد نیاز برای این برنامه را به دست آورید.

کاری که خواهی کرد

“The complete map with markers.

این برنامه یک نمای کلی از دفاتر اصلی گوگل در اروپا ارائه می دهد. کاربران می توانند یک دفتر را انتخاب کنند، برای کاوش در داخل و اطراف آن پرواز کنند و سپس برای بازگشت به نمای کلی، کوچکنمایی کنند. این ویژگی‌ها که معمولاً در برنامه‌های سفر و اکتشاف یافت می‌شوند، تجربه‌ای فراگیرتر را برای کاربران ارائه می‌کنند.

در این نرم افزار کد، یک برنامه وب سه بعدی خواهید ساخت که کارهای زیر را انجام می دهد:

Maps JavaScript API را به صورت پویا بارگیری می کند.
نشانگرهای سه بعدی را به نقشه اضافه می کند.
با استفاده از SVG به نشانگرها استایل می دهد.
قابلیت پرواز به و اطراف نشانگرها را اضافه می کند.
مکان ها را از کد در یک آرایه خلاصه می کند.

چیزی که یاد خواهید گرفت

نشانگرها چگونه کار می کنند
نحوه استایل دادن به نشانگرها
نحوه عملکرد انیمیشن با توابع داخلی
قرار دادن مکان های دوربین در مقابل مکان های نقطه ای برای کادربندی بهتر.
هک های مفید برای گرفتن پارامترهای دوربین برای کادربندی بهتر موارد.

پیش نیازها

برای تکمیل این Codelab باید با موارد اینجا آشنا شوید. اگر قبلاً با کار با پلتفرم Google Maps آشنا هستید، به Codelab بروید.

محصولات مورد نیاز پلتفرم نقشه های گوگل

در این Codelab، از محصولات پلتفرم Google Maps زیر استفاده خواهید کرد:

Maps JavaScript API

سایر الزامات این کد لبه

برای تکمیل این کد لبه، به حساب‌ها، خدمات و ابزارهای زیر نیاز دارید:

یک حساب Google Cloud با فعال کردن صورت‌حساب.
یک کلید API پلتفرم Google Maps با فعال کردن API جاوا اسکریپت Maps.
دانش اولیه جاوا اسکریپت، HTML و CSS.
یک ویرایشگر متن یا IDE به انتخاب شما، برای ذخیره ویرایش یک فایل برای مشاهده.
یک مرورگر وب برای مشاهده فایل در حین کار.

2. راه اندازی شوید

پلتفرم نقشه های گوگل را راه اندازی کنید

اگر قبلاً یک حساب Google Cloud Platform و پروژه‌ای با صورت‌حساب فعال ندارید، لطفاً راهنمای شروع به کار با Google Maps Platform را برای ایجاد یک حساب صورت‌حساب و یک پروژه ببینید.

در Cloud Console ، روی منوی کشویی پروژه کلیک کنید و پروژه ای را که می خواهید برای این کد لبه استفاده کنید انتخاب کنید.

APIها و SDKهای پلتفرم Google Maps مورد نیاز برای این لبه کد را در Google Cloud Marketplace فعال کنید. برای انجام این کار، مراحل این ویدیو یا این مستند را دنبال کنید.
یک کلید API در صفحه Credentials در Cloud Console ایجاد کنید. می توانید مراحل این ویدئو یا این مستند را دنبال کنید. همه درخواست‌ها به پلتفرم Google Maps به یک کلید API نیاز دارند.

3. کره ساده

برای شروع ساختن برنامه، ضروری است که راه اندازی اولیه را ایجاد کنید. همانطور که در تصویر نشان داده شده است، یک نمای "مرمر آبی" از زمین در اساسی ترین شکل آن ایجاد می کند:

“Image showing the globe as it is set up initially.

کد صفحه شروع را اضافه کنید

برای افزودن کره زمین به سایت، باید کد زیر را به صفحه خود اضافه کنید. این یک بخش برای بارگذار برای Maps Javascript API و یک تابع init اضافه می کند که عنصر Map 3D را در صفحه ای ایجاد می کند که در آن کد نشانگرها را اضافه می کنید.

مطمئن شوید که کلید خود را (که در بخش راه‌اندازی ایجاد شده است) به صفحه اضافه کرده‌اید، در غیر این صورت عنصر سه‌بعدی نمی‌تواند مقداردهی اولیه شود.

<!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>

با انجام این کار، آماده شروع کادربندی مکان مورد نظر هستید که در مرحله بعد این کار را انجام خواهید داد.

4. نمای اول را قاب کنید

اکنون که نقشه‌ای با نمای کره ایجاد کرده‌اید، مرحله بعدی پیاده‌سازی شما قاب‌بندی مکان شروع صحیح است. این به کاربر شما اجازه می دهد تا یک نمای کلی از محل کار خود دریافت کند.

در حالی که این مثال بر دفاتر Google در اروپا تمرکز دارد، می‌توانید این رویکرد را در هر مکان در سراسر جهان - از کل کشور گرفته تا یک بلوک شهری، اعمال کنید. سرعت و انعطاف‌پذیری محصول به شما این امکان را می‌دهد که برنامه خود را از جهانی به محلی با حداقل تغییرات کد مقیاس کنید.

با کادربندی اولیه شروع می‌کنید تا نقشه سه‌بعدی به شکل زیر در بیاید:

“The globe centered on Europe.

دوربین را در اروپا قاب کنید

برای اینکه نمایشگر را مطابق شکل نشان دهید، باید صفحه نمایش را به درستی قاب کنید که گویی دوربین را در فضا قرار داده اید و به پایین به مکان نگاه می کند.

برای انجام این کار می توان از تعدادی پارامتر در کنترل نقشه برای تنظیم جزئیات دوربین استفاده کرد. می توانید نحوه تعامل پارامترها در دنیای "واقعی" را در نمودار مشاهده کنید. به طور خاص نقطه مرکزی که دوربین به آن نگاه می کند و فاصله دور از جایی که شما به آن نگاه می کنید ( محدوده ). همچنین باید شیب پرسپکتیو دوربین را تنظیم کنید (در غیر این صورت مستقیماً به زمین نگاه خواهید کرد).

“An image showing the camera parameters.

تنظیم نهایی، عنوان ، جهت دوربین را تعیین می کند. این به عنوان افست از شمال تعیین می شود. این مقادیر روی عنصر نقشه سه بعدی به عنوان یک شی برای تنظیم نمایش اولیه اعمال می شود. می توانید این را در کد با سازنده 3D Element به روز شده مشاهده کنید.

map3D = new Map3DElement({
    center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
    range: 5814650,
    tilt: 33,
    heading: 4.36,
    mode: MapMode.HYBRID
});

گرفتن پارامترهای دوربین

کادربندی یک نما در یک نقشه سه بعدی نیاز به قرارگیری دقیق دوربین دارد که دستیابی به آن تنها از طریق کد می تواند چالش برانگیز باشد. برای ساده کردن این فرآیند، از این هک مفید استفاده کنید: تابعی را به صفحه خود اضافه کنید که وقتی روی نمای مورد نیاز کلیک می کنید، پارامترهای دوربین را ثبت می کند. پارامترها به کنسول خروجی می‌شوند و آماده کپی شدن در تنظیمات دوربین شی شما هستند.

می‌توانید کدی را که ممکن است بخواهید بعداً استفاده کنید پیدا کنید، آن را به نمونه این صفحه نشان داده شده اضافه می‌کند، اگرچه در نمونه صفحات بعدی وجود نخواهد داشت، زیرا برای Codelab مورد نیاز نیست، اما اگر می‌خواهید از طریق موقعیت‌یابی بهتر دوربین، دموهای همه‌جانبه‌تری ایجاد کنید، باید به خاطر بسپارید.

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 توجه کنید. اگر صفحه در حال بزرگنمایی یا چرخش است، مفید است که بتوانید جلوی وقوع انیمیشن را بگیرید تا بتوانید در آن لحظه موقعیت مکانی را در صفحه نمایش بگیرید. این قطعه کد به شما امکان می دهد این کار را انجام دهید. جزئیات بیشتر در مستندات stopCameraAnimation موجود است.

خروجی نمونه از کلیک، همانطور که در کنسول نشان داده شده است.

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 }

متن دوربین را می توان به عنوان ورودی json در اشیاء مختلف در نقشه های سه بعدی استفاده کرد، خروجی دوم محل واقعی نقطه ای است که کلیک روی آن اتفاق افتاده است، همچنین برای ایجاد نقاط یا هر چیزی برای موقعیت یابی نشانگرها مفید است.

با کادربندی صحیح صفحه، اکنون می توانید نشانگرها را اضافه کنید. برای یادگیری نحوه انجام به مرحله بعدی بروید.

راه حل بخش

برای این مرحله، صفحه تکمیل شده به عنوان راه حلی برای تایید اجرای شما ارائه شده است. (در صورت کپی کردن مطمئن شوید که از کلید API خود استفاده می کنید).

<!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. نشانگر ساده

در این بخش، یاد خواهید گرفت که چگونه اولین نشانگر خود را اضافه کنید. ابتدا، جزئیات کلی در مورد نشانگرها را خواهید آموخت.

نقشه‌های سه‌بعدی از ایجاد دو کلاس نشانگر مختلف، کلاس Marker3DElement و کلاس Marker3DInteractiveElement پشتیبانی می‌کنند، که انتخاب آن‌ها بر اساس اینکه آیا می‌خواهید کلیک نشانگر را فعال کنید یا خیر، تعیین می‌شود. جدا از این، آنها اساساً یکسان هستند، بنابراین ابتدا یک Marker3DElement ایجاد کرده و سپس در مراحل بعدی آن را به Marker3DInteractiveElement "ارتقا" خواهید داد.

می توانید راه حل کامل این مرحله را در اینجا ببینید:

“A globe with a marker showing the complete step.

مقداری ارتفاع به نشانگرهای خود اضافه کنید

اولین چیزی که باید بدانید این است که نشانگرها مانند هر چیز دیگری در نقشه سه بعدی سه بعدی هستند. این بدان معناست که مکان می‌تواند دارای ارتفاع (ارتفاع) باشد و آن ارتفاع می‌تواند به عنوان موقعیتی نسبت به سطح دریا، سطح زمین، مش و یا تنظیم شود که به زمین بچسبد و موقعیت ارتفاع را نادیده بگیرد. می‌توانید جزئیات بیشتری را در بخش ثابت‌های ارتفاع در مستندات مربوط به AltitudeMode ببینید.

همچنین می توانید با استفاده از مقدار اکسترود شده تعیین کنید که نشانگر اکسترود شود یا نه. این مشخص می کند که آیا نشانگر دارای یک خط کوچک به سمت زمین خواهد بود تا به آن کمک کند موقعیت واقعی را نسبت به ارتفاع نشان دهد که برای انتخاب نقاط روی زمین مفید است. می‌توانید نمونه‌ای از آن را با مکان Google UK مشاهده کنید. هر دو اکسترود شده اند و موقعیت آنها روی ارتفاع مطلق تنظیم شده است. اولی در 75 متر و دومی در 125 متر.


ارتفاع 75 متر.	ارتفاع 125 متر.

نشانگرهای دارای انسداد و برخورد را پنهان یا نشان دهید

اگرچه ممکن است در نمایش ما مهم نباشد، زیرا موقعیت‌ها کاملاً از هم دور هستند، برای نشانگرهایی که ممکن است با یکدیگر همپوشانی داشته باشند یا ممکن است در پشت ساختمان‌ها بیفتند، می‌توانید با مقادیر collisionBehavior یا drawsWhenOccluded کنترل کنید که چه اتفاقی برای آنها می‌افتد.

برای رفتار برخورد گزینه های زیر را دارید:

REQUIRED : (پیش‌فرض) همیشه نشانگر را بدون توجه به برخورد نمایش دهید.
OPTIONAL_AND_HIDES_LOWER_PRIORITY نشانگر را فقط در صورتی نمایش دهید که با دیگر نشانگرها همپوشانی نداشته باشد. اگر دو نشانگر از این نوع همپوشانی داشته باشند، نشانگر با zIndex بالاتر نشان داده می شود. اگر zIndex یکسانی داشته باشند، یکی با موقعیت عمودی پایین صفحه نمایش نشان داده می شود.
REQUIRED_AND_HIDES_OPTIONAL همیشه نشانگر را بدون در نظر گرفتن برخورد نمایش دهید، و هر OPTIONAL_AND_HIDES_LOWER_PRIORITY نشانگر یا برچسبی را که با نشانگر همپوشانی دارند، پنهان کنید.

تفاوت در نحوه نمایش نشانگرها بر اساس رفتار برخورد تعریف شده در تصاویر نشان داده شده است. همه نشانگرها هنگام تنظیم REQUIRED نشان داده می‌شوند، اما اگر از REQUIRED_AND_HIDES_OPTIONAL استفاده می‌کنید، در این حالت نشانگرهای پایین‌تر روی صفحه نمایش داده می‌شوند (شما می‌توانید با zIndex بازی کنید تا نشانگرهای دیگر در بالای صفحه نمایش داده شوند در صورت تمایل).


مورد نیاز	REQUIRED_AND_HIDES_OPTIONAL

برای انسداد، می توانید انتخاب کنید که نشانگرها در پشت ساختمان ها کشیده شوند یا خیر. این در تصویر زیر نشان داده شده است. هنگامی که drawsWhenOccluded روی true تنظیم می شود، نشانگرها را در هنگام ترسیم در پشت ساختمان ها کمی تاریک نشان می دهد، زمانی که روی false تنظیم می شود، نشانگرها را هنگامی که پشت ساختمان هستند پنهان می کند. جزئیات بیشتر در جدول زیر قابل مشاهده است:


`drawsWhenOccluded : false`	`drawsWhenOccluded : true`

همانطور که گفته شد، اگر ترسیم نشانگرهای مسدود شده مجاز باشد، نشانگرهایی که در اثر برخورد پنهان شده اند، کم نور نشان داده می شوند. در تصویر، برخی از نشانگرها را می بینید که توسط ساختمان ها و برخی دیگر توسط نشانگرهای دیگر پنهان شده اند.

“An image showing a number of markers and theeffect of occlusion.

برای جزئیات بیشتر به مثال رفتار برخورد در یک نقشه دو بعدی مراجعه کنید.

بوم را پاک کنید

اکنون زمان آن است که اولین نشانگر خود را ایجاد کنید. برای اطمینان از تمرکز کاربر بر روی نشانگرها، می توانید برچسب های پیش فرض را در نقشه سه بعدی غیرفعال کنید.

مقدار mode عنصر نقشه سه بعدی را روی SATELLITE تنظیم کنید.

برای اطلاعات بیشتر، حالت را ببینید.

map3D = new Map3DElement({
    center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
    range: 5814650,
    tilt: 33,
    heading: 4.36,
    mode: MapMode.SATELLITE
});

این منجر به نقشه سه بعدی زیر می شود:

“Image of Europe without borders and text.

اولین نشانگر را اضافه کنید

با یک بوم تمیز، اکنون می توانید اولین نشانگر را اضافه کنید. پارامترهای کلیدی شامل موقعیت و برچسب هستند.

برای افزودن نشانگر، موقعیت نشانگر را تنظیم کنید. همچنین می‌توانید یک برچسب، که در بالای نشانگر ظاهر می‌شود، و سایر عناصری را که در مستندات Marker3DElement توضیح داده شده است اضافه کنید.

برای اضافه کردن نشانگر ما، کد زیر را بعد از خطی که برچسب های پیش فرض را پنهان می کند، اضافه می کنید:

const marker = new Marker3DElement({
   position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
   label: 'Google UK',
   altitudeMode: 'ABSOLUTE',
   extruded: true,
});

map3D.append(marker);

پس از ایجاد نشانگر، آن را با استفاده از روش append به نقشه سه بعدی اضافه کنید. به یاد داشته باشید که نشانگرها به عنوان آرایه ای از عناصر فرزند در نقشه سه بعدی ذخیره می شوند. برای تغییر یک نشانگر، باید از طریق این آرایه به آن دسترسی داشته باشید.

اطمینان حاصل کنید که Marker3DElement از Maps JavaScript API با افزودن آن به لیست کتابخانه ها هنگام بارگیری API بارگیری شده است.

const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");

اکنون هنگامی که صفحه بارگذاری می شود، کل اروپا با نشانگری در بالای دفتر لندن قابل مشاهده خواهد بود. همانطور که در انیمیشن نشان داده شده است، می توانید به صورت دستی بزرگنمایی کنید تا نشانگر را روی مکان ایجاد شده ببینید.

“Animation showing manual zoom in to Google UK.

اکنون که اولین نشانگر خود را بارگذاری کرده اید، قدم بعدی زیباتر کردن آن است.

راه حل بخش

برای این مرحله، صفحه تکمیل شده به عنوان راه حلی برای تایید اجرای شما ارائه شده است. (در صورت کپی کردن، مطمئن شوید که از کلید API خود استفاده می کنید).

<!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

در این مرحله نشانگر را با تغییر نشانگر برای افزودن پرچمی به نشانگر برای نشان دادن کشوری که در آن قرار دارد زیباتر نشان می‌دهید. اجازه دهید ببینیم چگونه این کار انجام می‌شود و برای آن باید با PinElement آشنا شوید.

در پایان ظاهر جدیدی مانند شکل زیر خواهید داشت:

“Image with a marker with a UK flag on it”

سفارشی سازی اولیه با PinElement

یکی از عناصر مشترک بین نشانگرها در Javascript API، اعم از نقشه های دو بعدی یا سه بعدی، PinElement است. در حالی که یک Marker3DElement را به Map3DElement اضافه می‌کنید، یک PinElement را به عنوان فرزند به آن عنصر به Marker3DElement اضافه می‌کنید.

PinElement دارای توانایی، در سطح پایه، برای تغییر نشانگر معمولی برای تنظیم رنگ حاشیه، رنگ نقطه داخلی (یا گلیف) و رنگ پس‌زمینه است. اینها را در تصویری که نشانگر دوبعدی را نشان می دهد، مشاهده می کنید.

“Image with options for marker pin customisation”

همچنین می‌توانید با تنظیم مقدار مقیاس آن، اندازه نشانگر را از طریق عنصر تعیین کنید (>1 بزرگتر از حالت عادی و <1 کوچکتر به عنوان نسبت).

همچنین می‌توانید Glyph را با یک تصویر یا فایل svg جایگزین کنید، اگر می‌خواهید ظاهر سفارشی‌تری داشته باشید اما همچنان به ظاهر استاندارد PinElement نقشه پین باشید.

فراتر از PinElements

برای این مرحله می‌خواهید PinElement استاندارد را با یک پرچم svg و رنگ‌های مختلف به‌روزرسانی کنید، اما خوب است بدانید که می‌توانید ظاهر یک نشانگر را کاملاً تغییر دهید تا حتی شبیه پین نقشه نباشد. در نشانگر می‌توانید با استفاده از قالب‌هایی مانند HTMLImageElement و SVGElement، گرافیک‌های جدیدی را وارد کنید. می توانید جزئیات بیشتری در مورد انجام این کار در مستندات Marker3DElement-Slots بیابید.

برای اینکه ببینید چه چیزی کاملاً ممکن است، به نمونه‌های زیر نگاهی بیندازید که نمونه‌هایی از نشانگرهای یک ظاهر طراحی شده را با استفاده از تعدادی تکنیک مختلف نشان می‌دهند.


نشانگرها با سفارشی سازی اولیه از طریق PinElement، نمونه ها را ببینید.	نشانگرهایی با سفارشی سازی پیچیده از طریق الگو از طریق SVG و تصاویر، نمونه ها را ببینید.

`PinElement` اضافه کنید

برای تغییر ظاهر نشانگر اولین کاری که باید انجام شود این است که مطمئن شوید کتابخانه PinElement به صفحه اضافه شده است. این کار با افزودن خط کد زیر پس از وارد شدن کتابخانه maps3d انجام می شود:

const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');

اکنون عنصر بارگذاری شده است، PinElement را می توان ارجاع داد و ایجاد کرد. به کد نگاه کنید، آن را بین محل ایجاد نشانگر اضافه کنید و نشانگر را به نقشه سه بعدی اضافه کنید.

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);

از آنجایی که شما فقط یک پین اصلی را بارگذاری نمی کنید، تعدادی کار لازم است که فراتر از تنظیم PinElement، با رنگ پس زمینه و مقیاس مرتبط آن انجام شود.

ابتدا باید یک مرجع یک تصویر svg برای نماد پرچم ایجاد شود، در این مورد یک Union Jack. می توانید آنها را از مجموعه ای مانند این در https://flagicons.lipis.dev/ تهیه کنید.

هنگامی که نماد را دارید می توانید در مکانی قرار دهید که سایت بتواند مکان آن را پیدا کند، در این مورد می توانید مکان تصویر را کدگذاری سخت کنید یا از مکان فعلی سایت به عنوان خرد دایرکتوری استفاده کنید، همانطور که در اینجا با متغیر پایه نشان داده شده است. سپس می‌توانید این را به مکان روی سرور به پرچم سمت راست پیوند دهید، که در اینجا زیر '/images/gb.svg' است.

این یک PinElement ایجاد می کند که شبیه شکل زیر است:

“Marker showing Union Jack flag symbol.

بنابراین هنگامی که پرچم را در جای مناسب قرار دادید و کد را در جای مناسب قرار دادید، باید یک نقشه سه بعدی داشته باشید که به شکل زیر است:

“Zooming in to the new marker.

اکنون نشانگر ما را کاملاً آراسته کنید، همچنین می توان آن را تغییر داد تا قابل کلیک کردن باشد تا امکان افزودن تعامل وجود داشته باشد. این کار در مرحله بعدی انجام خواهد شد.

راه حل بخش

همچنین فراموش نکنید که باید فایل flag svg (یا فایل png انتخابی شما!) را دریافت کنید و آن را در فهرستی ذخیره کنید که می تواند توسط صفحه شما پیدا شود (در اینجا در پوشه تصاویر ذخیره می شود).

<!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. نشانگر تعاملی

در مرحله آخر یک نشانگر به صفحه اضافه شد، اما جدا از اینکه خوب به نظر می رسد کار خاصی انجام نمی دهد و همچنان باید به همان روش با نقشه سه بعدی تعامل داشته باشید. مرحله بعدی اضافه کردن توانایی انجام کاری با نشانگر هنگام کلیک کردن روی آن است که به نشانگر اجازه می‌دهد به تعامل کاربر واکنش نشان دهد.

برای اینکه این ویژگی اضافه شود، باید Marker3DElement را به Marker3DInteractiveElement تبدیل کنید. در پایان شما یک صفحه مشابه خواهید داشت، اما با کلیک روی آن نشانگر اکنون یک هشدار ظاهر می شود و چیزی شبیه به این خواهد شد:

“Image showing the response when the it is clicked.

ابتدا کلاس نشانگر را تغییر دهید

به منظور افزودن تعامل به یک نشانگر، باید مطمئن شوید که از کلاس مناسبی استفاده می کند. Marker3DInteractiveElement مورد نیاز است، اما از آنجایی که این افزونه برای Marker3DElement است، نیازی به انجام کاری غیر از بارگذاری کلاس جدید و تغییر نام کلاس در سازنده ندارید.

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();
});

توجه داشته باشید که رویداد stopPropagation برای اطمینان از اینکه هر شنونده کلیک دیگری در پشته بر روی اشیاء زیرین مانند بوم اصلی نقشه سه بعدی شلیک می شود استفاده می شود.

بنابراین اکنون وقتی برنامه خود را اجرا می کنید باید نتیجه زیر را دریافت کنید:

“Image showing the response when the it is clicked.

با قابلیت انجام کاری هنگام کلیک روی نشانگر، اکنون می‌توانید در مرحله بعد انیمیشنی را به صفحه اضافه کنید.

راه حل بخش

<!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. پرواز به

در این مرحله از قابلیت کلیک بر روی نشانگر انیمیشن اضافه شده برای پرواز به محل آن استفاده خواهید کرد. شما می توانید این را در عمل در اینجا ببینید.

“Animation showing clicked marker and fly to location.

متحرک سازی با flyCameraTo

برای افزودن این مورد به صفحه، از روش flyCameraTo نقشه‌های سه بعدی استفاده می‌کنید، که در آن دوربین بین مکان دوربینی که در آن هستید تا مکان دوربینی که می‌خواهید مشاهده کنید، متحرک می‌شود، بین این دو را درون‌یابی می‌کند و پرواز را در نقشه سه‌بعدی متحرک می‌کند.

هنگام استفاده از flyCameraTo ، باید FlyToAnimationOptions را مشخص کنید که دارای دو ویژگی است، endCamera که مکانی است که دوربین باید در انتهای انیمیشن قرار بگیرد، و durationMillis ، که مدت زمانی است که برای انجام این انتقال به میلی ثانیه نیاز است.

در مثال، دوربین را طوری تنظیم کنید که به ساختمانی که موقعیت نشانگر است، با شیب 65 درجه، برد 500 متر و نقطه به سمت شمال با عنوان 0 درجه نگاه کند. زمان بندی انیمیشن را 12500 میلی ثانیه (12.5 ثانیه) تنظیم کنید.

رویداد هشدار فعلی در صفحه را با قطعه flyCameraTo جایگزین کنید:

marker.addEventListener('gmp-click', (event) => {
   map3D.flyCameraTo({
       endCamera: {
           center: marker.position,
           tilt: 65,
           range: 500,
           heading: 0,
       },
       durationMillis: 12500,
   });

   event.stopPropagation();
});

تمام است، اکنون باید بتوانید صفحه را بازخوانی کنید و روی نشانگر کلیک کنید و به Google UK پرواز کنید، همانطور که در انیمیشن نشان داده شده است:

“Animation showing clicked marker and fly to location.

در این مرحله یک نشانگر قابل کلیک اضافه کردید که دوربین را به محل نشانگر هدایت می کند. در مرحله بعد قابلیت پرواز دوربین را در اطراف نقطه به طوری که به دور مکان بچرخد را اضافه خواهید کرد.

راه حل بخش

<!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. به اطراف پرواز کنید

عنصر نهایی انیمیشن ما استفاده از روش flyCameraAround برای متحرک سازی مداری در اطراف ساختمان است. در پایان شما یک انیمیشن خواهید داشت که به سمت ساختمان پرواز می کند و سپس مانند آنچه در انیمیشن نشان داده شده است در اطراف آن پرواز می کند. این احتمالاً برای یک مثال واقعی کمی سریع است، اما برای نشان دادن نحوه عملکرد اکشن مفید است، بدون اینکه خیلی طولانی باشد، می‌توانید با زمان‌بندی بازی کنید تا زمانی که مقداری را به دست آورید که برای شما مناسب است.

“Animation showing a marker being clicked then flying to and around a location.

بیایید به اطراف پرواز کنیم!

روش flyCameraAround شبیه تابع flyCameraTo است که تعدادی گزینه را به عنوان ورودی می گیرد که کنترل مکان مورد نظر را به عنوان پارامترهای دوربین و زمان بر حسب میلی ثانیه برای گردش در مدار می گیرد. در نهایت می توانید تعداد چرخش هایی را که می تواند در زمان مشخص شده رخ دهد را نیز مشخص کنید. می توانید همه گزینه ها را در اینجا در FlyAroundAnimationOptions ببینید

اما یک دقیقه صبر کنید!

در انیمیشن می توانید ببینید که انیمیشن به سمت مکان پرواز می کند و سپس در اطراف آن پرواز می کند و انیمیشن ها را زنجیر می کند. برای انجام این کار، از رویداد 3D Maps gmp-animationend استفاده می‌کنید تا مطمئن شوید که انیمیشن فعلی قبل از پخش انیمیشن بعدی به پایان رسیده است. این انیمیشن باید فقط یک بار قبل از توقف اتفاق بیفتد.

به کد نگاه کنید، آن را بعد از کد اضافه شده در قسمت قبل وارد کنید.

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 به آن اجازه می دهد تا رویداد flyCameraAround را فراخوانی کند. تنظیم نقطه شروع به همان نقطه ای که برای دوربین انتهایی fly به روش استفاده می شد به معنای یک انتقال صاف است (به طوری که باعث ایجاد هیچ گونه حرکت نامطلوب به مکان جدید نشود). دوباره durationMillis برای کنترل مدت زمان لازم برای انجام انیمیشن تنظیم شده است. در این حالت روش گزینه دیگری را نیز انتخاب می کند، rounds ، و این مقدار 1 است.

این به این معنی است که دوربین یک بار در 5 ثانیه به دور نقطه می چرخد. می توانید این مقادیر را به اندازه مناسب آزمایش کنید تا عددی را که برای شما مناسب است بیابید.

در این مرحله انیمیشن پایان می‌یابد، اما چون نمی‌خواهید رویداد gmp-animationend دوباره با این بیت کد فعال شود، که منجر به انجام بی‌نهایت مدار می‌شود. برای جلوگیری از این، گزینه ای به شنونده با تنظیم یک بار برابر با درست است. این بدان معنی است که رویداد پس از تکمیل حذف خواهد شد و از حلقه بی نهایت اجتناب می شود.

هنگامی که این مورد اضافه شد، باید بتوانید راه حل را اجرا کنید و اکنون انیمیشن را در انتهای نشانگر به گردش درآورید، همانطور که در انیمیشن نشان داده شده است:

“Animation showing a flying around a marker.

در این مرحله که اضافه کردید اکنون یک نشانگر دارید که می توان روی آن کلیک کرد، سپس دوربین به سمت و اطراف مکان نشانگر پرواز می کند. در مرحله بعدی زمان شروع به اضافه کردن امتیازات بیشتر است و به ما اجازه می دهد بین آنها حرکت کنیم.

راه حل بخش

<!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. پاریس!

در حالی که لندن یک شهر عالی است، کمی تنها به نظر می رسد، بنابراین اجازه دهید شروع به اضافه کردن مکان های جدید با شروع پاریس کنیم. برای انجام این کار، می توان از یک آرایه برای نگهداری تمام جزئیات مکان خاص استفاده کرد و سپس از آن به عنوان ورودی برای توابع و متغیرهایی که پارامترهای نمایش نشانگر و همچنین پرواز به و اطراف مکان های دوربین را تنظیم می کنند، استفاده کرد. که همانطور که ذکر شد ممکن است برای مثال برای کادربندی یک عکس دوربین بهتر از ساختمان، با مکان نقطه نشانگر متفاوت باشد.

“Animation showing a click and fly to and around Google France.

آرایه مکان

برای اینکه مجبور نباشید همه جزئیات مربوط به یک مکان خاص، مانند دوربین مشاهده، نقطه نشانگر و گزینه های نمایش را کدنویسی کنید، می توانید از آرایه کوچکی از اشیاء json برای نگهداری این داده ها استفاده کنید. زمانی که نشانگرها ایجاد می شوند و در برنامه مورد استفاده قرار می گیرند، این می تواند اعمال شود. شما می توانید این مثال را در قطعه کد مشاهده کنید و متغیری به نام officeLocations برای نگهداری آرایه ایجاد می کند.

کد زیر را درست قبل از تابع init اضافه کنید. همچنین توجه داشته باشید که متغیر پایه به خارج از تابع init منتقل شده است تا بتوان آن را در تمام مکان‌های اداری اعمال کرد.

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("/"));

هر دفتر دارای ویژگی های زیر است:

نام: نام مکان.
دوربین: نمای اولیه برای نگاه کردن به مکان برای پرواز به و اطراف.
نقطه: محل قرار دادن نشانگر.
پین: جزئیات رنگ پین نشانگر و ویژگی های علامت

یک زاویه متفاوت

ممکن است در اینجا متوجه شوید که برای بریتانیا مرکز دوربین و نقطه نشانگر یکسان هستند (به غیر از ارتفاع)، در حالی که برای فرانسه دوربین و نقطه متفاوت است. این به این دلیل است که برای موقعیت مکانی در فرانسه، نشانگر باید در مکانی متفاوت از نمای اولیه دوربین قرار گیرد، که نمای بهتری از کل ساختمان در هنگام پرواز به سمت و اطراف نسبت به آنچه در صورت استفاده از نقطه نشانگر ارائه می شود، می دهد.

به اروپا برگرد

یکی از عملکردهای داشتن امتیاز بیشتر این است که نیازی به حرکت بین آنها اضافه می کند. می‌توانید از یک کشویی برای اجازه دادن به انتخاب استفاده کنید، اما در این مثال، دوربین هر بار به نمای اروپایی بازمی‌گردد تا به کاربر اجازه دهد مکان دیگری را انتخاب کند.

برای انجام این کار، نمای اولیه باید در متغیری ذخیره شود که بتوان از آن برای تنظیم مجدد دوربین به کل نمای اروپا استفاده کرد. در این مثال یک متغیر جدید به نام europeCamera اضافه کنید تا آن را برای استفاده بعدی ذخیره کنید.

تابع init را به روز کنید

اولین ویرایشی که باید انجام دهید این است که هنگام ایجاد Map3DElement از شی europeCamera به عنوان ورودی استفاده کنید.

ویرایش دومی که باید انجام دهید این است که بخش ایجاد نشانگر را در حلقه بپیچید تا آن را با پارامترهای ذخیره شده در متغیرها به روز کنید، می توانید این موارد را در کد نشان داده شده مشاهده کنید:

office.point: محل نشانگر.
office.name: نام دفتر مورد استفاده برای برچسب نشانگر.
office.camera: محل اولیه دوربین.
office.pin: گزینه های PinElement برای تفاوت های نمایش

همچنین فراموش نکنید که یک فایل یا تصویر svg برای پرچم فرانسه دریافت کنید!

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);
}

توجه داشته باشید که تابع gmp-animationend دوم بعد از انیمیشن flyCameraAround اضافه می شود تا با استفاده از متغیر europeCamera ذخیره شده، پرواز به نمای اروپایی را کنترل کند. همانطور که در انیمیشن نشان داده شده است:

“Animation flying between and around offices in France and UK.

در این مرحله برنامه به دو مکان و امکان پرواز بین آنها با استفاده از انیمیشن و آرایه مکان گسترش یافته است. در مرحله بعد بقیه مکان های اداری به آرایه اضافه می شوند.

راه حل بخش

همچنین فراموش نکنید که باید فایل flag svgs (یا فایل‌های png انتخابی خود) را دریافت کنید و آن را در فهرستی ذخیره کنید که می‌تواند توسط صفحه شما پیدا شود (در اینجا در پوشه تصاویر ذخیره می‌شود).

<!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. مکان های بیشتر

در حالی که برنامه اکنون همه ویژگی های مورد نیاز را دارد، نقشه سه بعدی هنوز کمی پراکنده به نظر می رسد، بنابراین اکنون چند مکان دیگر اضافه خواهید کرد تا آن را کمی شلوغ تر کنید. از طریق استفاده از آرایه، پر کردن مکان های جدید با نشانگرهای منحصر به فرد خود آسان است. آخرین مرحله این است که به اضافه کردن نشانگرها ادامه دهید تا زمانی که نمای زیر وجود داشته باشد.

“An image showing all of the offices.

اضافه کردن نشانگرهای بیشتر

گوگل تعدادی دفاتر در بسیاری از کشورهای اروپا دارد، بنابراین اجازه دهید برخی از آنها را به نقشه اضافه کنیم. فقط مسئله به روز رسانی آرایه است. این می تواند از یک وب سرویس تهیه شود یا از یک فایل ثابت در جایی ارائه شود، در مورد ما برای اهداف ساده، در همان صفحه نگهداری می شود.

شما می توانید هر تعداد نشانگر را که دوست دارید اضافه کنید، که توسط صفحه انتخاب می شود و سپس به طور خودکار به نمای اضافه می شود. به یاد داشته باشید که پرچم های صحیح را دریافت کرده و آنها را در فهرست تصاویر (یا هر جا که مناسب است) ذخیره کنید.

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,
       },
   }
]

هنگامی که این کار را انجام دادید باید یک صفحه کامل مانند تصویر نشان داده شده وجود داشته باشد که به کاربر اجازه می دهد روی هر مکانی کلیک کند و به آن و اطراف آن پرواز کند و سپس خارج شود!

“Amination flying between and around offices in Spain and Sweden.

به شما تبریک می‌گوییم که شما نرم‌افزار را تکمیل کردید، اجازه دهید در بخش بعدی به پایان برسانیم و به دنبال چیزهای جدید دیگری برای امتحان باشیم!

راه حل بخش

<!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. مراحل بعدی

در این کد لبه، شما اصول اولیه کارهایی را که می توانید با سه بعدی در Maps JavaScript API انجام دهید، پوشش دادید. در مرحله بعد، برخی از این ویژگی ها را به نقشه اضافه کنید:

یک لیست کشویی اضافه کنید تا امکان انتخاب یک دفتر فراهم شود.
از برخی دیگر از گزینه های یک ظاهر طراحی نشانگر برای نشان دادن شعله های بیشتر استفاده کنید.
کتابخانه‌های اضافی موجود برای Maps JavaScript API را بررسی کنید که ویژگی‌های اضافی را فعال می‌کند، مانند Places برای نشان دادن رتبه‌بندی هر دفتر با استفاده از شناسه مکان آن!

برای ادامه یادگیری روش‌های بیشتر برای کار با Google Maps Platform و 3D در وب، این پیوندها را بررسی کنید:

نقشه های سه بعدی فوتورئالیستی را در اسناد جاوا اسکریپت Maps بررسی کنید
از نسخه ی نمایشی نقشه های سه بعدی الهام بگیرید
یکی دیگر از کد لبه های پلتفرم نقشه های گوگل را انجام دهید
پروژه های منبع باز پلتفرم نقشه های گوگل را در GitHub بررسی کنید
وبلاگ پلتفرم نقشه های گوگل را بخوانید

نشانگرها و انیمیشن را به نقشه سه بعدی فوتورئالیستی اضافه کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

1. قبل از شروع

چیزی که یاد خواهید گرفت

پیش نیازها

محصولات مورد نیاز پلتفرم نقشه های گوگل

سایر الزامات این کد لبه

2. راه اندازی شوید

پلتفرم نقشه های گوگل را راه اندازی کنید

3. کره ساده

کد صفحه شروع را اضافه کنید

4. نمای اول را قاب کنید

دوربین را در اروپا قاب کنید

گرفتن پارامترهای دوربین

راه حل بخش

5. نشانگر ساده

مقداری ارتفاع به نشانگرهای خود اضافه کنید

نشانگرهای دارای انسداد و برخورد را پنهان یا نشان دهید

بوم را پاک کنید

اولین نشانگر را اضافه کنید

راه حل بخش

6. نشانگر SVG

سفارشی سازی اولیه با PinElement

فراتر از PinElements

PinElement اضافه کنید

راه حل بخش

7. نشانگر تعاملی

ابتدا کلاس نشانگر را تغییر دهید

دوم رویداد کلیک را به نشانگر اضافه کنید

راه حل بخش

8. پرواز به

راه حل بخش

9. به اطراف پرواز کنید

راه حل بخش

10. پاریس!

راه حل بخش

11. مکان های بیشتر

راه حل بخش

12. مراحل بعدی

نشانگرها و انیمیشن را به نقشه سه بعدی فوتورئالیستی اضافه کنید

`PinElement` اضافه کنید