نوافذ المعلومات

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

تعرض نافذة المعلومات النص أو الصور في نافذة منبثقة أعلى الخريطة. ترتبط نوافذ المعلومات دائمًا بعلامة. سلوكهم التلقائي هو عرض المحتوى عند النقر على محدِّد الموقع.

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

يتضمن مستودع ApiDemos على GitHub نموذجًا يعرض جميع ميزات نوافذ المعلومات:

المقدمة

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

تظهر نافذة المعلومات بشكل موجَّه على شاشة الجهاز، وهي في الوسط فوق محدِّد الموقع المرتبط بها. وتحتوي نافذة المعلومات التلقائية على العنوان بالخط الغامق مع نص مقتطف (اختياري) تحت العنوان.

إضافة نافذة معلومات

تتمثّل أبسط طريقة لإضافة نافذة المعلومات في ضبط طريقتَي title() وsnippet() للعلامة المحدّدة. وفي حال ضبط هذه السمات، ستظهر نافذة معلومات عند النقر على تلك العلامة.

لغة Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

إظهار/إخفاء نافذة معلومات

تم تصميم نوافذ المعلومات للاستجابة إلى أحداث اللمس لدى المستخدم. يمكنك إذا أردت عرض نافذة معلومات آليًا من خلال الاتصال showInfoWindow() بعلامة الاستهداف. ويمكن إخفاء نافذة معلومات من خلال الاتصال hideInfoWindow().

لغة Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

يمكنك أيضًا إنشاء نوافذ معلومات للعلامات المجمّعة الفردية. اقرأ دليل إضافة نافذة معلومات للعلامات المجمّعة الفردية.

نوافذ المعلومات المُخصّصة

يمكنك أيضًا تخصيص محتوى نوافذ المعلومات وتصميمها. ولإجراء ذلك، عليك إنشاء عملية تنفيذ ملموسة لواجهة InfoWindowAdapter ثم استدعاء GoogleMap.setInfoWindowAdapter() لتنفيذها. تتضمّن الواجهة طريقتَين يمكنك تنفيذهما: getInfoWindow(Marker) وgetInfoContents(Marker). ستطلب واجهة برمجة التطبيقات أولاً getInfoWindow(Marker)، وإذا تم إرجاع null، سيتم طلب getInfoContents(Marker). إذا ظهر هذا الخطأ أيضًا null، سيتم استخدام نافذة المعلومات التلقائية.

أوّل خيار من هذه الخيارات (getInfoWindow()) يسمح لك بتقديم طريقة عرض سيتم استخدامها لنافذة المعلومات بالكامل. يتيح لك الخيار الثاني (getInfoContents()) تخصيص محتوى النافذة فقط مع الحفاظ على الإطار والخلفية التلقائيَين لنافذة المعلومات.

تعرض الصور أدناه نافذة معلومات تلقائية ونافذة معلومات تتضمن محتوى مخصّصًا ونافذة معلومات ذات إطار وخلفية مخصّصَين.

مقارنة نافذة المعلومات

أحداث نوافذ المعلومات

يتضمن نموذج MarkerDemoActivity مثالاً للرمز لتسجيل أحداث نافذة المعلومات ومعالجتها.

يمكنك استخدام أداة OnInfoWindowClickListener للاستماع إلى الأحداث والنقر على الأحداث في نافذة المعلومات. لضبط هذا المستمع على الخريطة، انقر على GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). وعندما ينقر المستخدم على نافذة المعلومات، يتم عرض onInfoWindowClick(Marker) ويتم تمييز نافذة المعلومات بلون التمييز التلقائي (الرمادي).

لغة Java


class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

Kotlin


internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

وبالمثل، يمكنك الاستماع إلى الأحداث التي تستمر لمدة طويلة باستخدام OnInfoWindowLongClickListener، ويمكنك إجراء ذلك من خلال الاتصال GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). تعمل هذه المستمعة بالطريقة نفسها التي تعمل بها أداة الاستماع إلى النقرات، وسيتم إعلامها في أحداث النقر الطويلة مع معاودة الاتصال onInfoWindowClose(Marker).

لتلقّي إشعار عند إغلاق نافذة المعلومات، استخدِم OnInfoWindowCloseListener الذي يمكنك ضبطه من خلال الاتصال برقم GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). ستصلك رد الاتصال من onInfoWindowClose(Marker).

ملاحظة حول إعادة تحميل نافذة المعلومات: يتم تنشيط حدث onInfoWindowClose() إذا أعد تحميل المستخدم نافذة المعلومات من خلال النقر على علامة تتضمّن نافذة معلومات مفتوحة من قبل. في المقابل، إذا اتصلت بـ Marker.showInfoWindow() آليًا في نافذة معلومات مفتوحة، لن يتم تنشيط حدث onInfoWindowClose(). ويستند هذا السلوك إلى الافتراض الذي يُدرك أنّ نافذة المعلومات سيتم إغلاقها وإعادة فتحها.

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