«نقشه‌های سه‌بعدی» در Maps JavaScript به شما کمک می‌کند تجربه‌های نقشه سه‌بعدی همه‌جانبه ایجاد کنید. این کیت ابزارهایی برای سفارشی‌سازی سبک نقشه، بهبود دسترس‌پذیری، و افزایش قابلیت استفاده ارائه می‌دهد و توسعه برنامه‌های جذاب و تعاملی را ممکن می‌سازد.
در اینجا مثالی از کارهایی که می‌توانید با «نقشه‌های سه‌بعدی» در Maps JavaScript API انجام دهید آورده شده است:
چرا باید از «نقشه‌های سه‌بعدی» در Maps JavaScript استفاده کرد
«نقشه‌های سه‌بعدی» در Maps JavaScript کلاس
Map3DElement
(<gmp-map-3d>)
را در کتابخانه maps3d ارائه می‌دهد تا بتوانید از تصاویر سه‌بعدی Google در سراسر برنامه‌هایتان استفاده کنید. نقشه‌های سه‌بعدی تجربه پرداز توکار سه‌بعدی را ارائه می‌دهند و به شما امکان می‌دهند محیط‌های سه‌بعدی دنیای واقعی، نماهای شهر، و گشت‌های نشانگرهای مکانی را ادغام یا آزمایش کنید.
برای عوارض سه‌بعدی، کج کردن دوربین، جهت، و پروازهای محدوده‌ای، ساختمان‌های سه‌بعدی برجسته، و اشیای سه‌بعدی مانند
Marker3DElement
(<gmp-marker-3d>)، از سه‌بعدی
<gmp-map-3d>
(Map3DElement
در کتابخانه maps3d) استفاده کنید.
برای نقشه‌های جاده‌ای دوبعدی تخت، سنجاق‌های دوبعدی استاندارد
AdvancedMarkerElement
، و سبک‌بندی برداری دوبعدی، از دوبعدی
<gmp-map>
(MapElement یا
google.maps.Map در
کتابخانه maps) استفاده کنید.
با نقشه‌های سه‌بعدی در Maps JavaScript چه کارهایی می‌توانید انجام دهید؟
- ایجاد تجربه‌های نقشه دنیای واقعی: تصاویر هوایی سه‌بعدی واقع‌گرایانه از شهرها، زمین، و نشان‌های مکان را در حالت
SATELLITEیاHYBRID(که برچسب‌های نقشه پایه را روی تصاویر ماهواره‌ای قرار می‌دهد) رندر کنید، یا یک نقشه پایه سه‌بعدی سبک‌دار را در حالتROADMAPبااستفاده از ویژگیmodeنمایش دهید. برای اطلاعات بیشتر، به تغییر حالت نقشه مراجعه کنید. - سفارشی‌سازی کردن سبک نقشه:
- سبک‌پردازی نقشه سه‌بعدی بااستفاده از فضای ابری: نمایان بودن و سبک‌پردازی نقاط موردعلاقه (POI) و جاده‌های نقشه پایه را کنترل کنید. برای اطلاعات بیشتر، به سفارشی‌سازی نقشه‌های سه‌بعدی مراجعه کنید.
- نشانگرهای سفارشی، پاپ‌اورها، چندخطی‌ها، و چندضلعی‌ها: مکان‌ها را شناسایی کنید و بااستفاده از
MarkerElement،Marker3DElement،Marker3DInteractiveElement،PopoverElement،Polyline3DElement، وPolygon3DElementمسیرها یا مرزهای سه‌بعدی را روی نقشه ترسیم کنید. برای اطلاعات بیشتر، به نشانگرها، پنجره‌های بازشو، و شکل‌ها و خطوط مراجعه کنید. - مدل‌های سه‌بعدی و دارایی‌های glTF: مدل‌های سه‌بعدی glTF با رندرینگ مبتنی بر فیزیک (PBR) سفارشی از ساختمان‌ها، نشان‌های مکان، یا اشیاء را در مختصات دنیای واقعی بااستفاده از
Model3DElementاضافه کنید. برای اطلاعات بیشتر، به مدل‌ها مراجعه کنید.
- ساخت نقشه‌های فراگیر:
- مسیرهای دوربین ازپیش‌تعیین‌شده: کاربران را بااستفاده از
flyCameraToوflyCameraAroundازطریق پروازهای دوربین ازپیش‌تعریف‌شده و پویانمایی‌های مداری در نقشه سه‌بعدی‌تان راهنمایی کنید. برای اطلاعات بیشتر، پویانمایی مسیرهای دوربین را ببینید. - کنترل تعامل کاربر: کنترل‌ها و حرکت دوربین دردسترس برای کاربران را سفارشی‌سازی کنید. برای اطلاعات بیشتر، کنترل‌ها و کاوش نقشه سه‌بعدی، محدود کردن نما و مرزهای دوربین، و کنترل موقعیت دوربین را ببینید.
- مسیرهای دوربین ازپیش‌تعیین‌شده: کاربران را بااستفاده از
نمونه سریع
برای بار کردن کتابخانه maps3d و ارائه عنصر
<gmp-map-3d>
با
mode="HYBRID"،
center
(lat,lng,altitude)،
range،
tilt،
و
heading،
از قطعه کد زیر استفاده کنید:
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
YOUR_API_KEY را با کلید میانای برنامه‌سازی کاربردی Google Maps Platform خودتان جایگزین کنید.
نحوه استفاده از «نقشه‌های سه‌بعدی» در Maps JavaScript
| ۱ | راه‌اندازی کردن | با راه‌اندازی JavaScript API شروع کنید و دستورالعمل‌های راه‌اندازی را که در ادامه می‌آید تکمیل کنید. |
| ۲ | درک نحوه صدور صورت‌حساب Maps JavaScript API | برای اطلاعات بیشتر، استفاده و صورت‌حساب را ببینید. |
| 3 | ایجاد نقشه | برای اطلاعات بیشتر، به شروع به کار مراجعه کنید. |
پوشش
مش‌های سه‌بعدی واقع‌گرایانه ساختمان‌ها و نشان‌های مکان در مناطق کلان‌شهری منتخب در کشورها و مناطق پشتیبانی‌شده دردسترس است. در مناطقی که پوشش مش سه‌بعدی ندارند (مثل هند)،
<gmp-map-3d>
تصاویر ماهواره‌ای یا نقشه راه دوبعدی را که روی ارتفاع زمین سه‌بعدی کشیده شده است بدون ساختمان‌های سه‌بعدی برجسته ارائه می‌دهد. برای نمایش یک مکان دیدنی در منطقه‌ای بدون پوشش مش سه‌بعدی، می‌توانید یک مدل سه‌بعدی glTF سفارشی را در مختصات آن بااستفاده از Model3DElement قرار دهید یا از یک <gmp-map> دوبعدی استفاده کنید. برای
دردسترس بودن کشوربه‌کشور (در ستون Maps JavaScript 3D)،
جزئیات پوشش پلاتفرم Google Maps را ببینید.
مراحل بعدی
- برای ساختن «سلام، دنیا!»، راهنمای شروع به کار را بررسی کنید. نقشه سه‌بعدی.
- آزمایشگاه کد مقدماتی را امتحان کنید تا با نحوه افزودن ویژگی به نقشه آشنا شوید.
- در آزمایشگاه کد بعدی، دانش خود را درباره نشانگرها و پویانمایی گسترش دهید.
- مجموعه نمونه‌های Google را مرور کنید تا نمونه‌ای را که برای مورد استفاده شما مناسب است پیدا کنید.