Google Haritalar Android İşaretçi Kümeleme Yardımcı Programı

Platform seçin: Android iOS JavaScript

İşaretçilerinizi kümeleyerek, okunmasını zorlaştırmadan haritaya çok sayıda işaretçi yerleştirebilirsiniz.

Giriş

Bu videoda, verileriniz harita üzerinde çok sayıda veri noktası gerektiren durumlarda işaretçi kümelemenin kullanımı anlatılmaktadır.

İşaretçi kümeleme yardımcı programı, farklı yakınlaştırma düzeylerinde birden çok işaretçiyi yönetmenize yardımcı olur. Daha net bir ifadeyle, "işaretçiler" bu noktada aslında "öğeler"dir ve yalnızca oluşturulduklarında "İşaretçiler" haline gelirler. Ancak daha net olmak adına, bu belgede tüm örneklere "işaretçi" adı verilmektedir.

Kullanıcı, haritayı yüksek bir yakınlaştırma düzeyinde görüntülediğinde, haritada tek tek işaretçiler gösterilir. Kullanıcı görüntüyü uzaklaştırdığında, işaretçiler haritayı daha kolay görüntüleyebilmek için kümeler halinde toplanır. İşaretçi kümeleme yardımcı programı, Android için Haritalar SDK'sı Yardımcı Program Kitaplığı'nın bir parçasıdır. Kitaplığı henüz oluşturmadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzundaki talimatları uygulayın.

Kümelenmiş işaretçileri olan bir harita
Kümelenmiş işaretçiler

İşaretçi kümeleme yardımcı programını kullanmak için işaretçileri ClusterManager içine ClusterItem nesneleri olarak eklemeniz gerekir. ClusterManager, işaretçileri Algorithm öğesine iletir ve bu da işaretçileri bir küme kümesine dönüştürür. ClusterRenderer, kümeler ve bağımsız işaretçileri ekleyip kaldırarak oluşturma işlemini üstlenir. ClusterRenderer ve Algorithm takılabilir ve özelleştirilebilir.

Yardımcı program kitaplığı, işaretçi kümeleme yardımcı programının örnek uygulamalarını sağlayan bir demo uygulamayla gönderilir. Demo uygulamasının çalıştırılmasıyla ilgili yardım için kurulum kılavuzuna bakın. Demo uygulaması aşağıdaki işaretçi kümeleme örneklerini içerir:

  • ClusteringDemoActivity: İşaretçi kümelemeyi gösteren basit bir etkinlik.
  • BigClusteringDemoActivity: 2.000 işaretçi ile kümeleme.
  • CustomMarkerClusteringDemoActivity: Kümelenmiş işaretçiler için özel tasarım oluşturma.

Basit bir işaretçi kümesi ekleyin

On adet işaretçiden oluşan basit bir küme oluşturmak için aşağıdaki adımları uygulayın. Sonuç aşağıdaki gibi görünür, ancak gösterilen/kümelenen işaretçi sayısı, yakınlaştırma düzeyine bağlı olarak değişir:

On tane kümelenmiş işaretçi içeren bir harita
On kümelenmiş işaretçi

Gerekli adımların özeti şu şekildedir:

  1. Haritada bir işaretleyiciyi göstermek için ClusterItem uygulayın. Küme öğesi, işaretçinin konumunu LatLng nesnesi ve isteğe bağlı bir başlık veya snippet olarak döndürür.
  2. Küme öğelerini (işaretçiler) yakınlaştırma düzeyine göre gruplandırmak için yeni bir ClusterManager ekleyin.
  3. ClusterManager, işleyiciyi uyguladığından haritanın OnCameraIdleListener() özelliğini ClusterManager olarak ayarlayın.
  4. İşaretçi tıklama etkinliğine yanıt olarak belirli bir işlev eklemek isterseniz, işleyiciyi ClusterManager uyguladığından haritanın OnMarkerClickListener() özelliğini ClusterManager olarak ayarlayın.
  5. İşaretçileri ClusterManager içine aktarın.

Adımları ayrıntılı bir şekilde ele alalım: On adet işaretçiden oluşan basit bir kümemizi oluşturmak için önce ClusterItem uygulayan bir MyItem sınıfı oluşturun.

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
    }
}

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;
    }
}

Harita etkinliğinize, ClusterManager öğesini ekleyin ve küme öğeleriyle feed'e ekleyin. ClusterManager öğesinin MyItem türünde olduğunu belirten <MyItem> tür bağımsız değişkenine dikkat edin.

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)
    }
}

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);
    }
}

Yakınlaştırıp uzaklaştırırken kümeleme animasyonlarını devre dışı bırakmayı da seçebilirsiniz. Animasyon kapatılırsa işaretçiler kümelerin içine ve dışına taşınmak yerine yerine oturur. Animasyonları devre dışı bırakmak için ClusterManager içinde aşağıda gösterildiği gibi setAnimation() kullanın:

Kotlin



clusterManager.setAnimation(false)

Java


clusterManager.setAnimation(false);

Tek bir kümelenmiş işaretçi için bilgi penceresi ekleme

Belirli kümelenmiş işaretçilere yönelik bir bilgi penceresi eklemek için ClusterItem uygulamanızın oluşturucuya başlık ve snippet dizeleri ekleyin.

Aşağıdaki örnekte, bir başlık ve snippet ayarlayarak addItems() yönteminde bilgi penceresi içeren bir işaretçi eklenir:

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)

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);

İşaretçi kümelerini özelleştirin

ClusterManager oluşturucu, bir DefaultClusterRenderer ve NonHierarchicalDistanceBasedAlgorithm oluşturur. ClusterManager öğesinin setAlgorithm(Algorithm<T> algorithm) ve setRenderer(ClusterRenderer<T> view) yöntemlerini kullanarak ClusterRenderer ve Algorithm öğelerini değiştirebilirsiniz.

Kümelerin oluşturulmasını özelleştirmek için ClusterRenderer işlevini uygulayabilirsiniz. DefaultClusterRenderer, başlangıç için iyi bir temel sağlar. DefaultClusterRenderer öğesini alt sınıflandırarak varsayılanları geçersiz kılabilirsiniz.

Özelleştirmenin ayrıntılı bir örneği için yardımcı program kitaplığıyla birlikte gönderilen demo uygulamasındaki CustomMarkerClusteringDemoActivity öğesine göz atın.

Özel kümelenmiş işaretçileri olan bir harita
Özel kümelenmiş işaretçiler

CustomMarkerClusteringDemoActivity kendi küme öğesini (Person) tanımlar ve DefaultClusterRenderer öğesini PersonRenderer olarak genişleterek onu oluşturur.

Demoda, küme tıklandığında kişi hakkında daha fazla bilgi görüntülemek için ClusterManager.OnClusterClickListener<Person> arayüzünün nasıl uygulanacağı da gösterilmektedir. Ayrıca ClusterManager.OnClusterItemClickListener<Person> öğesini de benzer bir şekilde uygulayabilirsiniz.

Demo uygulamasının çalıştırılmasıyla ilgili yardım için kurulum kılavuzuna bakın.