البدء

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

في هذا البرنامج التعليمي، ستتعرّف على كيفية إنشاء تطبيق JavaScript الأول باستخدام "خرائط ثلاثية الأبعاد" في Maps JavaScript: وهي نافذة أساسية تعرض منظرًا علويًا لجسر "البوابة الذهبية" مع منطقة "مارين هيدلاندز" في الخلفية.

بعد إكمال البرنامج التعليمي، من المفترض أن تظهر الخريطة التالية في بيئة التطوير:

إعداد البيئة

قبل البدء في كتابة الرمز، يجب إعداد بيئة تشغّل JavaScript. في هذا البرنامج التعليمي، ستستخدم متصفّح ويب كبيئة. تتوافق جميع متصفّحات الويب الحديثة مع JavaScript، لذا لا تحتاج إلى تثبيت أي برامج إضافية.

  1. افتح محرِّر نصوص من اختيارك.
  2. أنشئ ملفًا جديدًا واحفظه بالامتداد .html (مثل hello-p3djs.html).

كتابة صفحة HTML

للبدء، عليك إنشاء صفحة ويب تتضمّن بنية HTML أساسية:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

إضافة JavaScript

بعد ذلك، ستضيف عنصر 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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

تشغيل التطبيق

لتشغيل التطبيق والاطّلاع على الناتج، اتّبِع الخطوات التالية:

  1. احفظ ملف HTML الذي أنشأته.
  2. افتح الملف في متصفّح ويب (يمكنك النقر مرّتين على الملف أو سحبه إلى نافذة المتصفّح أو النقر بزر الماوس الأيمن واستخدام "فتح باستخدام").
  3. من المفترض أن تظهر الخريطة في نافذة المتصفّح.

تهانينا! لقد كتبت للتو تطبيقًا باستخدام &quot;خرائط ثلاثية الأبعاد&quot; من Google في Maps JavaScript API.

الخطوات التالية

  • يمكنك إنشاء تجارب خرائط ثلاثية الأبعاد أكثر تعقيدًا باستخدام العينات الحالية من Google.
  • يمكنك الاستفادة من الإمكانات الكاملة لـ &quot;الخرائط الثلاثية الأبعاد&quot; في Maps JavaScript API من خلال قراءة المستندات المرجعية.