במדריך הזה תלמדו איך ליצור את תוכנית ה-JavaScript הראשונה שלכם באמצעות מפות פוטוריאליסטיות בתלת-ממד במפות Google JavaScript: חלון פשוט שבו רואים את גשר שער הזהב ברקע.
בסיום המדריך אמורה להופיע המפה הבאה בסביבת הפיתוח:
הגדרת הסביבה
לפני שתתחילו לכתוב קוד, עליכם להגדיר סביבה שמשתמשת ב-JavaScript. במדריך זה, עליכם להשתמש בדפדפן אינטרנט בתור הסביבה. בכל דפדפני האינטרנט המודרניים יש תמיכה מובנית ב-JavaScript, כך שאין צורך להתקין תוכנות נוספות.
- פותחים כלי לעריכת טקסט לבחירתכם.
- יוצרים קובץ חדש ושומרים אותו בסיומת
.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
מכיל את הקריאה לטעון את 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 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>
הפעלת התוכנית
כדי להריץ את התוכנית ולראות את הפלט, פועלים לפי השלבים הבאים:
- שומרים את קובץ ה-HTML שיצרתם.
- פותחים את הקובץ בדפדפן אינטרנט (אפשר ללחוץ לחיצה כפולה על הקובץ, לגרור אותו לחלון דפדפן או ללחוץ לחיצה ימנית ולהשתמש באפשרות 'פתיחה באמצעות').
- המפה אמורה להופיע בחלון הדפדפן.
כל הכבוד! בדיוק כתבת תוכנית באמצעות מפות Google פוטוריאליסטיות בתלת-ממד בממשק API של JavaScript ב-Google Maps.
השלבים הבאים
- יצירת חוויות מורכבות יותר במפה בתלת-ממד באמצעות הדוגמאות הקיימות של Google.
- רוצים לגלות את הפוטנציאל המלא של מפות תלת-ממד ב-API JavaScript של מפות Google? כדאי לקרוא את מסמכי התיעוד.