מתחילים

במדריך הזה תלמדו איך ליצור את אפליקציית JavaScript הראשונה שלכם באמצעות האפליקציה הפוטוריאליסטית תלת-ממדית של מפות Google ב-JavaScript של מפות Google: חלון בסיסי שמציג מבט במבט-על של גשר שער הזהב, עם הראש של 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

בשלב הבא צריך להוסיף רכיב HTML מותאם אישית כדי לטעון את המפה. הקוד מכיל שני רכיבים:

  • gmp-map-3d מכיל את הפרמטרים שמשמשים לאתחול המיקום והתצוגה של המצלמה ההתחלתית.
  • השדה script מכיל את הקריאה לטעינת ממשק ה-API של JavaScript של מפות Google. חשוב להחליף את YOUR_KEY במפתח ה-API.
<!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.
  • רוצים לגלות את הפוטנציאל המלא של מפות תלת-ממדיות במפות Google ב-Maps JavaScript API? כל מה שצריך לעשות הוא לקרוא את מאמרי העזרה.