در این آموزش، خودتان را در ایجاد اولین برنامه جاوااسکریپت بااستفاده از «نقشه‌های سه‌بعدی» در «جاوااسکریپت Maps» راهنمایی خواهید کرد: پنجره‌ای ساده که نمایی از بالا از «پل گلدن گیت» با «مارین هدلندز» در پس‌زمینه نمایش می‌دهد.
پس‌از تکمیل آموزش گام‌به‌گام، باید نقشه زیر را در محیط توسعه خود ببینید:
راه‌اندازی محیط
قبل‌از شروع نوشتن کد، باید محیطی را راه‌اندازی کنید که جاوا اسکریپت را اجرا کند. برای این آموزش گام‌به‌گام، از مرورگر وب به‌عنوان محیط استفاده خواهید کرد. همه مرورگرهای وب مدرن از جاوا اسکریپت پشتیبانی داخلی دارند، بنابراین نیازی به نصب نرم‌افزار اضافی ندارید.
- ویرایشگر نوشتار دلخواهتان را باز کنید.
- فایل جدیدی ایجاد کنید و آن را با افزونه
.html(مثلاًhello-p3djs.html) ذخیره کنید.
یک صفحه HTML بنویس
برای شروع، صفحه وبی با ساختار HTML پایه ایجاد خواهید کرد:
<html>
<head>
<title>Map</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
افزودن جاوا اسکریپت
سپس، عنصر HTML سفارشی را برای بار کردن نقشه اضافه می‌کنید. کد حاوی دو عنصر است:
gmp-map-3dحاوی پارامترهای استفاده‌شده برای مقداردهی اولیه موقعیت و نمای شروع دوربین است.-
scriptحاوی فراخوانی برای بار کردن Maps JavaScript API است. حتماًYOUR_KEYرا با کلید میانای برنامه‌سازی کاربردی خود جایگزین کنید.
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script
async
src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
</head>
<body>
<gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
</gmp-map-3d>
</body>
</html>اجرا کردن برنامه
برای اجرای برنامه و دیدن خروجی، این مراحل را دنبال کنید:
- فایل HTML را که ایجاد کرده‌اید ذخیره کنید.
- فایل را در مرورگر وب باز کنید (می‌توانید روی فایل دوکلیک کنید، آن را به پنجره مرورگر بکشید، یا کلیک راست کنید و از «باز کردن با» استفاده کنید).
- باید نقشه را در پنجره مرورگرتان ببینید.
تبریک! شما به‌تازگی برنامه‌ای بااستفاده از «نقشه‌های سه‌بعدی» Google در Maps JavaScript API نوشته‌اید.
مراحل بعدی
- بااستفاده از نمونه‌های موجود Google، تجربه‌های پیچیده‌تر نقشه سه‌بعدی بسازید.
- با خواندن اسناد مرجع، با تمام قابلیت‌های «نقشه‌های سه‌بعدی» در Maps JavaScript API آشنا شوید.