البدء

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

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

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

إعداد البيئة

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

  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>

إضافة JavaScript

بعد ذلك، ستضيف عنصر HTML مخصّصًا لتحميل الخريطة. يحتوي الرمز على عنصرَين:

  • يحتوي gmp-map-3d على المَعلمات المستخدَمة لضبط موضع الكاميرا الأولي وطريقة العرض.
  • تحتوي script على طلب تحميل Maps JavaScript 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 mode="hybrid" 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=beta&libraries=maps3d"></script>
  </body>
</html>

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

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

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

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

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

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