شروع کنید

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

پس از اتمام آموزش، باید نقشه زیر را در محیط توسعه خود مشاهده کنید:

محیط خود را تنظیم کنید

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

  1. ویرایشگر متن دلخواه خود را باز کنید.
  2. یک فایل جدید ایجاد کنید و آن را با پسوند .html ذخیره کنید (به عنوان مثال، hello-p3djs.html ).

یک صفحه HTML بنویسید

برای شروع، یک صفحه وب با ساختار اصلی HTML ایجاد خواهید کرد:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

جاوا اسکریپت را اضافه کنید

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

  • gmp-map-3d شامل پارامترهایی است که برای مقداردهی اولیه موقعیت و نمای دوربین شروع می شود.
  • script شامل تماس برای بارگیری Maps JavaScript API است. حتماً کلید API خود را جایگزین YOUR_KEY کنید. 
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

برنامه را اجرا کنید

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

  1. فایل HTML ایجاد شده را ذخیره کنید.
  2. فایل را در یک مرورگر وب باز کنید (می توانید روی فایل دوبار کلیک کنید، آن را به پنجره مرورگر بکشید، یا راست کلیک کنید و از "Open with" استفاده کنید).
  3. شما باید نقشه را در پنجره مرورگر خود ببینید.

تبریک می گویم! شما به تازگی برنامه ای را با استفاده از نقشه های سه بعدی فوتورالیستی API جاوا اسکریپت Maps Google نوشته اید.

مراحل بعدی

  • با استفاده از نمونه‌های موجود Google، تجربه‌های پیچیده‌تری از نقشه سه بعدی بسازید.
  • با مطالعه مستندات مرجع، پتانسیل کامل نقشه های سه بعدی را در Maps JavaScript API کشف کنید.