البدء

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

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

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

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

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

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