שליטה במיקום המצלמה

במפות תלת-ממד ב-Maps JavaScript API, אתם יכולים לנהל את המיקוד של המצלמה באמצעות האפשרות cameraPosition.

התנהגויות מרכזיות:

  • עם center: קואורדינטות קו הרוחב וקו האורך מציינות את הנקודה המדויקת במפה שאליה המצלמה פונה.
  • עם cameraPosition: המצלמה עצמה ממוקמת בקואורדינטות שסופקו במהלך הבנייה. לכן קשה מאוד למרכז את התצוגה בנקודה ספציפית שמעניינת אתכם.

בדוגמה הבאה מוצג אתחול של מפה באמצעות האפשרות center כדי להבטיח נקודת מיקוד ספציפית. הסמן מציין את נקודת המרכז שצוינה בתג center:

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

קוד מקור מלא לדוגמה

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

דוגמה לניסיון

שדה ראייה וטווח

אפשר לשנות את החלק במפה שמוצג באזור התצוגה באמצעות שני פרמטרים שונים: range (טווח) ו-fov (שדה ראייה). שניהם משפיעים על רמת הזום, אבל הם פועלים בצורה שונה:

  • ‫range: קובע את המרחק הפיזי בין המצלמה לנקודת המרכז. התאמה של ההגדרה הזו שקולה להזזת המצלמה קרוב יותר למפה או רחוק יותר ממנה.

  • fov (שדה ראייה): קובע את הזווית של עדשת המצלמה. ערך גבוה יותר פועל כמו עדשה רחבת זווית ומציג יותר מהפריפריה, בעוד שערך נמוך יותר פועל כמו עדשת טלפוטו.

ההשוואה הבאה מציגה את אותה מפה בקצוות מנוגדים של ספקטרום fov הצבעים. במפה השמאלית, שדה הראייה מוגדר ל-5 (צר/טלפוטו), ובמפה הימנית הוא מוגדר ל-80 (זווית רחבה).

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