التجوّل الافتراضي

اختيار النظام الأساسي: Android iOS JavaScript

توفّر تقنية "التجوّل الافتراضي من Google" إطلالات بانورامية بزاوية 360 درجة من الطرق المحدّدة في جميع أنحاء منطقة تغطيتها.

يوضح هذا الفيديو كيف يمكنك استخدام خدمة "التجوّل الافتراضي" لمنح المستخدمين تجربة حقيقية من عنوان ما على الخريطة، وتوفير سياق هادف حول وجهتهم أو أي مكان يهتمون به.

التغطية المتاحة من خلال الإصدار 2 من واجهة برمجة تطبيقات Android لخرائط Google هي نفسها التغطية لتطبيق خرائط Google على جهاز Android. يمكنك قراءة المزيد عن "التجوّل الافتراضي" والاطّلاع على المناطق المتوافقة على خريطة تفاعلية، وذلك على صفحة لمحة عن "التجوّل الافتراضي".

تنشئ فئة StreetViewPanorama نموذجًا لبانوراما التجوّل الافتراضي في تطبيقك. في واجهة المستخدم، يتم تمثيل البانوراما بكائن StreetViewPanoramaFragment أو StreetViewPanoramaView.

عيّنات تعليمات برمجية

يتضمن مستودع ApiDemos على GitHub عيّنات توضّح استخدام ميزة "التجوّل الافتراضي".

عيّنات لغة Kotlin:

نماذج Java:

نظرة عامة على ميزة "التجوّل الافتراضي" في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات Android

توفر حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل Android خدمة "التجوّل الافتراضي" للحصول على الصور المستخدمة في "التجوّل الافتراضي من Google" ومعالجتها. ويتم عرض الصور كبانوراما.

كل بانوراما التجوّل الافتراضي هي صورة أو مجموعة من الصور التي توفر عرضًا كاملاً بزاوية 360 درجة من موقع واحد. تتوافق الصور مع إسقاط متساوي المستطيلات (Plate Carrée)، والذي يحتوي على عرض أفقي بزاوية 360 درجة (ملتفة كاملة) و180 درجة للعرض العمودي (من العرض المستقيم إلى الأعلى) وتحدد البانوراما بزاوية 360 درجة الناتجة إسقاطًا على الكرة مع التفاف الصورة بالسطح الثنائي الأبعاد لتلك الكرة.

يوفر StreetViewPanorama عارضًا يعرض البانوراما ككرة مع وجود كاميرا في منتصفها. يمكنك معالجة رمز StreetViewPanoramaCamera للتحكّم في تكبير/تصغير الكاميرا واتجاهها (الإمالة والاتجاهات).

البدء

إعداد مشروع

اتّبع دليل البدء لإعداد حزمة تطوير البرامج (SDK) لـ "خرائط Google" لمشروع Android.

التحقّق من توفّر بانوراما "التجوّل الافتراضي" قبل إضافة بانوراما

تتضمن مكتبة عملاء حزمة تطوير البرامج (SDK) لخدمات Google Play بعض نماذج "التجوّل الافتراضي" التي يمكنك استيرادها إلى مشروعك واستخدامها كأساس للتطوير. راجع المقدمة للحصول على إرشادات حول استيراد النماذج.

حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لمكتبة أدوات Android هي مكتبة مفتوحة المصدر تضم فئات مفيدة لمجموعة من التطبيقات. يتضمّن مستودع GitHub أداة البيانات الوصفية لميزة "التجوّل الافتراضي". تتحقّق هذه الأداة مما إذا كان الموقع الجغرافي متوافقًا مع ميزة "التجوّل الافتراضي" يمكنك تجنب الأخطاء عند إضافة بانوراما التجوّل الافتراضي إلى تطبيق Android من خلال استدعاء أداة البيانات الوصفية هذه وإضافة بانوراما التجوّل الافتراضي فقط إذا كان الرد OK.

استخدام واجهة برمجة التطبيقات

اتبع التعليمات التالية لإضافة بانوراما التجوّل الافتراضي إلى أحد أجزاء Android. وهذه هي أبسط طريقة لإضافة ميزة "التجوّل الافتراضي" إلى تطبيقك. ثم اقرأ المزيد حول الأجزاء وطرق العرض وتخصيص البانوراما.

إضافة بانوراما في "التجوّل الافتراضي"

اتبع الخطوات التالية لإضافة بانوراما التجوّل الافتراضي مثل هذه:

عرض توضيحي لبانوراما التجوّل الافتراضي

باختصار:

  1. أضف كائن جزء إلى النشاط الذي سيتعامل مع بانوراما التجوّل الافتراضي. الطريقة الأسهل لإجراء ذلك هي من خلال إضافة عنصر <fragment> إلى ملف التنسيق الخاص بـ Activity.
  2. نفِّذ واجهة OnStreetViewPanoramaReadyCallback واستخدِم طريقة استدعاء onStreetViewPanoramaReady(StreetViewPanorama) للحصول على اسم معرِّف للكائن StreetViewPanorama.
  3. يمكنك استدعاء getStreetViewPanoramaAsync() على الجزء لتسجيل معاودة الاتصال.

في ما يلي مزيد من التفاصيل حول كل خطوة.

إضافة جزء

أضِف عنصر <fragment> إلى ملف تنسيق النشاط لتحديد كائن جزء. في هذا العنصر، اضبط السمة class على com.google.android.gms.maps.StreetViewPanoramaFragment (أو SupportStreetViewPanoramaFragment).

فيما يلي مثال على جزء في ملف تخطيط:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

إضافة رمز "التجوّل الافتراضي"

للعمل باستخدام بانوراما التجوّل الافتراضي داخل تطبيقك، ستحتاج إلى تنفيذ واجهة OnStreetViewPanoramaReadyCallback وتعيين مثيل لمعاودة الاتصال على كائن StreetViewPanoramaFragment أو StreetViewPanoramaView. يستخدم هذا الدليل التوجيهي StreetViewPanoramaFragment، لأنّ هذه أبسط طريقة لإضافة "التجوّل الافتراضي" إلى تطبيقك. الخطوة الأولى هي تنفيذ واجهة معاودة الاتصال:

Kotlin



class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

      

Java


class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

      

في طريقة Activity onCreate()، اضبط ملف التنسيق على أنّه طريقة عرض المحتوى. على سبيل المثال، إذا كان ملف التنسيق يحمل الاسم main.xml، استخدِم الرمز التالي:

Kotlin



override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    val streetViewPanoramaFragment =
        supportFragmentManager
            .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
}

      

Java


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}

      

يمكنك الحصول على اسم معرِّف للجزء من خلال استدعاء FragmentManager.findFragmentById()، وتمريره معرِّف المورد للعنصر <fragment>. لاحظ أنه تتم إضافة معرّف المورد R.id.streetviewpanorama تلقائيًا إلى مشروع Android عند إنشاء ملف التنسيق.

يمكنك بعد ذلك استخدام getStreetViewPanoramaAsync() لإعداد رد الاتصال على الجزء.

Kotlin



val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

      

Java


SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

      

يمكنك استخدام طريقة استدعاء onStreetViewPanoramaReady(StreetViewPanorama) لاسترداد مثيل غير خالٍ من StreetViewPanorama الجاهز للاستخدام.

Kotlin



override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

      

Java


@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

      

مزيد من المعلومات حول ضبط الحالة الأولية

على عكس الخريطة، لا يمكن ضبط الحالة الأولية لإلقاء نظرة عامة على التجوّل الافتراضي باستخدام XML. مع ذلك، يمكنك ضبط الصورة البانورامية بشكل آلي من خلال تمرير كائن StreetViewPanoramaOptions يحتوي على الخيارات المحدّدة.

Kotlin



val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

      

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

      

مزيد من المعلومات حول StreetViewPanoramaFragment

StreetViewPanoramaFragment هي فئة فرعية من فئة Android Fragment تسمح لك بوضع بانوراما "التجوّل الافتراضي" في أحد أقسام Android. وتعمل كائنات StreetViewPanoramaFragment كحاويات للبانوراما وتتيح الوصول إلى كائن StreetViewPanorama.

StreetViewPanoramaFragment

StreetViewPanoramaView

تسمح لك StreetViewPanoramaView، وهي فئة فرعية من فئة Android View، بوضع بانوراما التجوّل الافتراضي في View Android. تمثّل View منطقة مستطيلة من الشاشة، وتشكّل وحدة أساسية أساسية في تطبيقات Android وتطبيقاته المصغّرة. كما هو الحال في StreetViewPanoramaFragment، يعمل StreetViewPanoramaView كحاوية للبانوراما، ويعرض الوظيفة الأساسية من خلال الكائن StreetViewPanorama. على مستخدمي هذا الصف إعادة توجيه جميع طرق دورة حياة النشاط (مثل onCreate() وonDestroy() وonResume() وonPause()) إلى الطرق المقابلة في الفئة StreetViewPanoramaView.)

تخصيص الوظائف التي يتحكم فيها المستخدم

تتوفر الوظائف التالية تلقائيًا للمستخدم عند عرض بانوراما التجوّل الافتراضي: العرض الشامل والتكبير/التصغير والانتقال إلى صور البانوراما المجاورة. يمكنك تفعيل أو إيقاف الإيماءات التي يتحكّم فيها المستخدم من خلال طُرق على StreetViewPanorama. تظلّ التغييرات الآلية ممكنة عند إيقاف الإيماءة.

تعيين موقع الصورة البانورامية

لضبط موقع بانوراما "التجوّل الافتراضي"، اتّصِل بالرقم StreetViewPanorama.setPosition() مع تمرير LatLng. يمكنك أيضًا ضبط radius وsource كمَعلمتَين اختياريتَين.

يكون النطاق الجغرافي مفيدًا إذا كنت تريد توسيع أو تضييق نطاق المنطقة التي تبحث فيها ميزة "التجوّل الافتراضي" عن صورة بانورامية مطابقة. ويعني نصف القطر 0 أنه يجب ربط البانوراما بـ LatLng المحدد بالضبط. النطاق الجغرافي الافتراضي هو 50 مترًا. إذا كان هناك أكثر من صورة بانورامية واحدة في منطقة المطابقة، فستعرض واجهة برمجة التطبيقات أفضل تطابق.

ويكون أحد المصادر مفيدًا إذا كنت تريد تقييد التجوّل الافتراضي للبحث فقط عن الصور البانورامية الموجودة في الهواء الطلق. يمكن أن تظهر الصور البانورامية للتجوّل الافتراضي تلقائيًا داخل أماكن مثل المتاحف والمباني العامة والمقاهي والأنشطة التجارية. يُرجى العِلم أنّه قد لا تتوفّر صور بانورامية خارجية للموقع الجغرافي المحدّد.

Kotlin



val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

      

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);

      

بدلاً من ذلك، يمكنك ضبط الموقع استنادًا إلى معرّف البانوراما من خلال تمرير panoId إلى StreetViewPanorama.setPosition().

لاسترداد رقم تعريف البانوراما للصور البانورامية المجاورة، استخدم أولاً getLocation() لاسترداد StreetViewPanoramaLocation. ويحتوي هذا الكائن على معرّف البانوراما الحالية ومصفوفة من كائنات StreetViewPanoramaLink، ويحتوي كل منها على معرّف بانوراما مرتبطة بالصفحة الحالية.

Kotlin



streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

      

Java


StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

      

التكبير والتصغير

يمكنك تغيير مستوى التكبير/التصغير آليًا من خلال ضبط StreetViewPanoramaCamera.zoom. سيؤدي ضبط التكبير/التصغير على 1.0 إلى تكبير الصورة بعامل 2.

يستخدم المقتطف التالي StreetViewPanoramaCamera.Builder() لإنشاء كاميرا جديدة مع إمالة الكاميرا الحالية واتجاهها، مع زيادة التكبير بمقدار خمسين في المئة.

Kotlin



val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

      

Java


float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

      

ضبط اتجاه الكاميرا (نقطة الرؤية)

يمكنك تحديد اتجاه كاميرا "التجوّل الافتراضي" من خلال ضبط الاتّجاه والإمالة على StreetViewPanoramaCamera.

يحمل
الاتجاه الذي تشير إليه الكاميرا، والذي يتم تحديده بالدرجات في اتجاه عقارب الساعة من الشمال الحقيقي، حول موقع الكاميرا. اتجاه الشمال الصحيح هو 0، والشرق 90، والجنوب 180، والغرب هو 270.
إمالة
تمت إمالة المحور "ص" للأعلى أو للأسفل. ويتراوح النطاق من -90 إلى 0 إلى 90، وتكون درجة -90 متجهة للأسفل مباشرةً، وتتراوح القيمة 0 في الأفق، و90 في خط مستقيم. يتم قياس التباين بناءً على درجة الصوت التلقائية الأولية للكاميرا، والتي غالبًا ما تكون (وليس دائمًا) أفقية مسطَّحة. على سبيل المثال، بالنسبة إلى صورة يتم التقاطها على تل، من المرجّح أن يكون لدينا درجة صوت تلقائية ليست أفقية.

يستخدم المقتطف التالي StreetViewPanoramaCamera.Builder() لإنشاء كاميرا جديدة تتضمّن إمكانية التكبير أو التصغير وإمالة الكاميرا الحالية، مع تغيير الاتجاه بمقدار 30 درجة إلى اليسار.

Kotlin



val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

      

Java


float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

      

يعمل المقتطف التالي على إمالة الكاميرا إلى الأعلى بمقدار 30 درجة.

Kotlin



var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()

      

Java


float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

أضِف تأثيرات حركية إلى الكاميرا

لتحريك حركات الكاميرا، يمكنك الاتصال بالرقم StreetViewPanorama.animateTo(). تدمج الرسوم المتحركة بين سمات الكاميرا الحالية وسمات الكاميرا الجديدة. إذا كنت تريد الانتقال مباشرة إلى الكاميرا بدون رسوم متحركة، فيمكنك تعيين المدة على 0.

Kotlin



// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)

      

Java


// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);

      

تعرض الصورة التالية النتيجة عند جدولة تشغيل الصورة المتحركة أعلاه كل 2, 000 مللي ثانية، باستخدام Handler.postDelayed():

عرض توضيحي للصور المتحركة البانورامية عبر ميزة &quot;التجوّل الافتراضي&quot;