البدء

في هذا الدليل التعليمي، سترشد نفسك إلى إنشاء برنامجك الأول باستخدام JavaScript باستخدام الخرائط الثلاثية الأبعاد التي تبدو مثل الصور الفوتوغرافية في JavaScript في "خرائط Google": وهي نافذة بسيطة تعرض عرضًا علويًا لجسر Golden Gate مع Marin Headlands في الخلفية.

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

إعداد البيئة

قبل بدء كتابة الرمز، عليك إعداد بيئة تعمل على تنفيذ 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

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

  • يحتوي 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 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. افتح الملف في متصفّح ويب (يمكنك النقر مرّتين على الملف أو سحبه إلى نافذة متصفّح أو النقر بزر الماوس الأيمن واستخدام "الفتح باستخدام").
  3. من المفترض أن تظهر الخريطة في نافذة المتصفح.

تهانينا! لقد كتبت للتو برنامجًا باستخدام واجهة برمجة التطبيقات JavaScript لـ "خرائط Google" لإنشاء خرائط ثلاثية الأبعاد تبدو واقعية.

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

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