أداة تجميع علامات Android في "خرائط Google"

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

من خلال تجميع العلامات، يمكنك وضع عدد كبير من العلامات على الخريطة بدون جعل قراءة الخريطة صعبة.

مقدمة

يناقش هذا الفيديو استخدام تجميع العلامات عندما تتطلب بياناتك عددًا كبيرًا من نقاط البيانات على الخريطة.

تساعدك أداة تجميع العلامات في إدارة علامات متعددة على مستويات تكبير/تصغير مختلفة. ولكي تكون دقيقة، فإنّ 'العلامات&#39؛ هي في الواقع&#39؛items&#39؛ وفي هذه المرحلة، وتصبح فقط #39;Markers' عند عرضها. ولكن لأغراض التوضيح، سيُطلق على هذا المستند اسم "'أقلام التحديد&#39؛ في مختلف أنحاء العالم".

عندما يشاهد المستخدم الخريطة عند مستوى تكبير/تصغير مرتفع، تظهر العلامات الفردية على الخريطة. عند تصغير المستخدم، تتجمع العلامات معًا في مجموعات، لتسهيل عرض الخريطة. تعد أداة تجميع العلامات جزءًا من حزمة تطوير البرامج (SDK) للخرائط لخدمة "مكتبة التطبيقات المتوافقة مع Android". إذا لم يتم إعداد المكتبة بعد، يُرجى اتّباع دليل الإعداد قبل قراءة بقية هذه الصفحة.

العلامات المجمّعة

لاستخدام أداة تجميع العلامات، عليك إضافة العلامات بصفتها عناصر ClusterItem إلى ClusterManager. وتمرِّر ClusterManager العلامات إلى Algorithm، ما يحوِّلها إلى مجموعة من المجموعات. وتتولى ميزة ClusterRenderer مهمة العرض، من خلال إضافة المجموعات والمجموعات والعلامات الفردية وإزالتها. يمكن توصيل ClusterRenderer وAlgorithm ويمكن تخصيصهما.

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

• ClusteringDemoActivity: نشاط بسيط يوضّح تجميع العلامات.
• BigClusteringDemoActivity: مجموعة تضمّ 2,000 علامة.
• CustomMarkerClusteringDemoActivity: إنشاء تصميم مخصّص للعلامات المحدّدة.

إضافة أداة تجميع بسيطة

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

عشرة علامات مجمَّعة

إليك ملخّص عن الخطوات المطلوبة:

1. نفِّذ ClusterItem لتمثيل محدّد على الخريطة. يعرض عنصر المجموعة موضع العلامة كعنصر LatLng، وعنوان أو مقتطف اختياري.
2. أضِف عنصر ClusterManager جديدًا لتجميع عناصر المجموعة (المحدّدات) استنادًا إلى مستوى التكبير أو التصغير.
3. اضبط OnCameraIdleListener() على الخريطة في ClusterManager، لأنّ ClusterManager ينفِّذ المستمع.
4. إذا كنت تريد إضافة وظائف مُحدّدة استجابةً للنقر على علامة محدّد، عليك ضبط OnMarkerClickListener() في الخريطة على ClusterManager، لأنّ ClusterManager ينفِّذ المستمع.
5. أدخِل العلامات في ClusterManager.

يمكنك الاطّلاع على الخطوات بمزيد من التفصيل: لإنشاء المجموعة البسيطة التي تتألف من عشرة علامات، عليك أولاً إنشاء فئة MyItem تنفّذ ClusterItem.

Java

public class MyItem implements ClusterItem {
    private final LatLng position;
    private final String title;
    private final String snippet;

    public MyItem(double lat, double lng, String title, String snippet) {
        position = new LatLng(lat, lng);
        this.title = title;
        this.snippet = snippet;
    }

    @Override
    public LatLng getPosition() {
        return position;
    }

    @Override
    public String getTitle() {
        return title;
    }

    @Override
    public String getSnippet() {
        return snippet;
    }

    @Nullable
    @Override
    public Float getZIndex() {
        return 0f;
    }
}

      

Kotlin

inner class MyItem(
    lat: Double,
    lng: Double,
    title: String,
    snippet: String
) : ClusterItem {

    private val position: LatLng
    private val title: String
    private val snippet: String

    override fun getPosition(): LatLng {
        return position
    }

    override fun getTitle(): String {
        return title
    }

    override fun getSnippet(): String {
        return snippet
    }

    override fun getZIndex(): Float {
        return 0f
    }

    init {
        position = LatLng(lat, lng)
        this.title = title
        this.snippet = snippet
    }
}

      

في نشاط الخريطة، أضِف السمة ClusterManager وأرسِلها إلى العناصر المجمّعة. اطّلِع على الوسيطة <MyItem>، التي تشير إلى أنّ السمة ClusterManager هي من النوع MyItem.

Java

// Declare a variable for the cluster manager.
private ClusterManager<MyItem> clusterManager;

private void setUpClusterer() {
    // Position the map.
    map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.503186, -0.126446), 10));

    // Initialize the manager with the context and the map.
    // (Activity extends context, so we can pass 'this' in the constructor.)
    clusterManager = new ClusterManager<MyItem>(context, map);

    // Point the map's listeners at the listeners implemented by the cluster
    // manager.
    map.setOnCameraIdleListener(clusterManager);
    map.setOnMarkerClickListener(clusterManager);

    // Add cluster items (markers) to the cluster manager.
    addItems();
}

private void addItems() {

    // Set some lat/lng coordinates to start with.
    double lat = 51.5145160;
    double lng = -0.1270060;

    // Add ten cluster items in close proximity, for purposes of this example.
    for (int i = 0; i < 10; i++) {
        double offset = i / 60d;
        lat = lat + offset;
        lng = lng + offset;
        MyItem offsetItem = new MyItem(lat, lng, "Title " + i, "Snippet " + i);
        clusterManager.addItem(offsetItem);
    }
}

      

Kotlin

// Declare a variable for the cluster manager.
private lateinit var clusterManager: ClusterManager<MyItem>

private fun setUpClusterer() {
    // Position the map.
    map.moveCamera(CameraUpdateFactory.newLatLngZoom(LatLng(51.503186, -0.126446), 10f))

    // Initialize the manager with the context and the map.
    // (Activity extends context, so we can pass 'this' in the constructor.)
    clusterManager = ClusterManager(context, map)

    // Point the map's listeners at the listeners implemented by the cluster
    // manager.
    map.setOnCameraIdleListener(clusterManager)
    map.setOnMarkerClickListener(clusterManager)

    // Add cluster items (markers) to the cluster manager.
    addItems()
}

private fun addItems() {

    // Set some lat/lng coordinates to start with.
    var lat = 51.5145160
    var lng = -0.1270060

    // Add ten cluster items in close proximity, for purposes of this example.
    for (i in 0..9) {
        val offset = i / 60.0
        lat += offset
        lng += offset
        val offsetItem =
            MyItem(lat, lng, "Title $i", "Snippet $i")
        clusterManager.addItem(offsetItem)
    }
}

      

يمكنك أيضًا اختيار إيقاف الصور المتحركة المجمّعة عند التكبير والتصغير. إذا كانت الصورة المتحركة غير مفعّلة، تتم إضافة العلامات إلى موضعها بدلاً من نقلها من المجموعات إلى خارجها. لإيقاف الصور المتحركة، استخدِم setAnimation() في ClusterManager كما هو موضّح أدناه:

Java

clusterManager.setAnimation(false);

      

Kotlin

clusterManager.setAnimation(false)

      

إضافة نافذة معلومات لعلامة مجمّعة فردية

لإضافة نافذة معلومات لعلامات محدّدة مجمّعة، أضِف سلاسل عناوين ومقتطفات إلى أداة إنشاء ClusterItem.

يوضّح المثال التالي محدّد موقع بنافذة معلومات بالطريقة addItems()، من خلال إعداد عنوان ومقتطف:

Java

// Set the lat/long coordinates for the marker.
double lat = 51.5009;
double lng = -0.122;

// Set the title and snippet strings.
String title = "This is the title";
String snippet = "and this is the snippet.";

// Create a cluster item for the marker and set the title and snippet using the constructor.
MyItem infoWindowItem = new MyItem(lat, lng, title, snippet);

// Add the cluster item (marker) to the cluster manager.
clusterManager.addItem(infoWindowItem);

      

Kotlin

// Set the lat/long coordinates for the marker.
val lat = 51.5009
val lng = -0.122

// Set the title and snippet strings.
val title = "This is the title"
val snippet = "and this is the snippet."

// Create a cluster item for the marker and set the title and snippet using the constructor.
val infoWindowItem = MyItem(lat, lng, title, snippet)

// Add the cluster item (marker) to the cluster manager.
clusterManager.addItem(infoWindowItem)

      

تخصيص مجموعات علامات

تنشئ دالة إنشاء ClusterManager السمة DefaultClusterRenderer وNonHierarchicalDistanceBasedAlgorithm. يمكنك تغيير ClusterRenderer وAlgorithm باستخدام طريقتَي setAlgorithm(Algorithm<T> algorithm) وsetRenderer(ClusterRenderer<T> view) في ClusterManager.

ويمكنك تنفيذ السياسة ClusterRenderer لتخصيص عرض المجموعات. تقدّم السمة DefaultClusterRenderer قاعدة جيدة للبدء منها. ومن خلال الفئة الفرعية DefaultClusterRenderer، يمكنك إلغاء الإعدادات التلقائية.

للحصول على مثال مفصّل على التخصيص، يمكنك الاطّلاع على CustomMarkerClusteringDemoActivity في التطبيق التجريبي الذي يتم شحنه إلى مكتبة الأدوات.

علامات مجمّعة مخصّصة

تحدّد السمة CustomMarkerClusteringDemoActivity عنصر المجموعة الخاص بها، وهو Person، وتعرضه من خلال توسيع DefaultClusterRenderer على أنها PersonRenderer.

يوضّح العرض التوضيحي أيضًا كيفية تنفيذ واجهة ClusterManager.OnClusterClickListener<Person> لعرض مزيد من المعلومات حول الشخص عند النقر على المجموعة. ويمكنك أيضًا تنفيذ السمة ClusterManager.OnClusterItemClickListener<Person> بطريقة مشابهة.

للحصول على مساعدة بشأن تشغيل التطبيق التجريبي، يمكنك مراجعة دليل الإعداد.