الخطوات الأولى

في هذا البرنامج التعليمي، سترشدك أثناء إنشاء برنامج JavaScript الأول باستخدام الخرائط الثلاثية الأبعاد ذات الصور الواقعية في 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

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

  • تضم gmp-map-3d المعلَمات المستخدمة لإعداد موضع كاميرا البداية وعرضها.
  • يحتوي script على طلب تحميل واجهة برمجة تطبيقات JavaScript للخرائط. تأكَّد من استبدال 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" tilt="67.5"></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. من المفترض أن تظهر الخريطة في نافذة المتصفح.

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

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

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