حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

التحكّم في موضع الكاميرا

في "الخرائط الثلاثية الأبعاد" ضمن 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

تجربة عيّنة

JSFiddle.net

مجال الرؤية والمدى

يمكنك ضبط مقدار الخريطة المرئية في إطار العرض باستخدام مَعلمتَين مختلفتَين: range وfov. على الرغم من أنّ كليهما يؤثران في مستوى "التكبير"، إلا أنّهما يعملان بشكل مختلف:

‫range: تتحكّم في المسافة الفعلية بين الكاميرا ونقطة المنتصف. ويعادل تعديل هذا الإعداد تحريك الكاميرا بالقرب من الخريطة أو بعيدًا عنها.
fov (مجال الرؤية): يتحكّم في زاوية عدسة الكاميرا. تعمل القيمة الأعلى كعدسة بزاوية عريضة، حيث تعرض المزيد من المحيط، بينما تعمل القيمة الأقل كعدسة مقربة.

تعرض المقارنة التالية الخريطة نفسها في طرفَي النطاق fov. في الخريطة اليمنى، تم ضبط مجال الرؤية على 5 (ضيق/مقرب)، وفي الخريطة اليسرى، تم ضبطه على 80 (زاوية عريضة).

مقارنة جنبًا إلى جنب بين صورتَين ثلاثيتَي الأبعاد من الجو لجسر "غولدن غيت" يعرض الجانب الأيمن صورة شاملة من الأعلى لجسر كامل و"رأس مارين". يعرض الجانب الأيمن صورة مقرّبة جدًا لبرج تعليق أحمر وجسر بزاوية حادة إلى الأسفل.