ยูทิลิตีการจัดกลุ่มเครื่องหมาย Android ของ Google Maps

การจัดกลุ่มเครื่องหมายของคุณเป็นกลุ่มและวางเครื่องหมายจำนวนมากบนแผนที่โดยไม่ต้องทำให้แผนที่อ่านยาก

เกริ่นนำ

วิดีโอนี้จะกล่าวถึงการใช้การจัดกลุ่มเครื่องหมายเมื่อข้อมูลของคุณต้องมีจุดข้อมูลจำนวนมากบนแผนที่

ยูทิลิตีการจัดกลุ่มเครื่องหมายจะช่วยคุณจัดการตัวทำเครื่องหมายหลายรายการในระดับการซูมต่างๆ ถ้าจะพูดให้ชัดๆ จริงๆ แล้ว "เครื่องหมาย" ก็คือ "รายการ" ณ จุดนี้ และจะกลายเป็น "ตัวทำเครื่องหมาย" เมื่อแสดงผลเท่านั้น แต่เพื่อความชัดเจน เอกสารนี้จึงจะตั้งชื่อว่า "เครื่องหมาย" ตลอดทั้งเอกสาร

เมื่อผู้ใช้ดูแผนที่ในระดับการย่อ/ขยายสูง เครื่องหมายต่างๆ จะแสดงบนแผนที่ เมื่อผู้ใช้ซูมออก เครื่องหมายจะรวมกันเป็นกลุ่มเพื่อให้ดูแผนที่ได้ง่ายขึ้น ยูทิลิตีการจัดกลุ่มเครื่องหมายเป็นส่วนหนึ่งของ Maps SDK สำหรับ Android Utility Library หากยังไม่ได้ตั้งค่าไลบรารี ให้ทำตามคู่มือการตั้งค่าก่อนอ่านส่วนที่เหลือของหน้านี้

หากต้องการใช้ยูทิลิตีการจัดกลุ่มเครื่องหมาย คุณจะต้องเพิ่มตัวทำเครื่องหมายเป็นออบเจ็กต์ ClusterItem ใน ClusterManager ClusterManager จะส่งตัวทำเครื่องหมายไปยัง Algorithm ซึ่งจะเปลี่ยนรูปแบบเป็นชุดคลัสเตอร์ ClusterRenderer จะดูแลการแสดงผลด้วยการเพิ่มและนำคลัสเตอร์และตัวทำเครื่องหมายแต่ละรายการออก ClusterRenderer และ Algorithm เป็นแบบเสียบปลั๊กและปรับแต่งได้

ไลบรารียูทิลิตีจะมาพร้อมกับแอปเดโมที่แสดงตัวอย่างการใช้งานยูทิลิตีการจัดกลุ่มเครื่องหมาย หากต้องการความช่วยเหลือในการเรียกใช้แอปเดโม โปรดดู คู่มือการตั้งค่า แอปเดโมมีตัวอย่างการจัดกลุ่มตัวทำเครื่องหมายต่อไปนี้

• ClusteringDemoActivity: กิจกรรมง่ายๆ ที่แสดงการจัดกลุ่มเครื่องหมาย
• BigClusteringDemoActivity: การจัดกลุ่มที่มีเครื่องหมาย 2,000
• CustomMarkerClusteringDemoActivity: สร้างการออกแบบที่กำหนดเองสำหรับตัวทำเครื่องหมายที่จัดกลุ่มไว้

เพิ่มคลัสเตอร์ตัวทำเครื่องหมายแบบง่าย

ทำตามขั้นตอนต่อไปนี้เพื่อสร้างกลุ่มเครื่องหมาย 10 เครื่องหมายแบบง่าย ผลการค้นหาจะมีลักษณะดังนี้ แต่จำนวนเครื่องหมายที่แสดง/คลัสเตอร์จะเปลี่ยนไปตามระดับการซูม

ขั้นตอนที่จำเป็นมีดังนี้

1. ใช้ ClusterItem เพื่อแสดงเครื่องหมายบนแผนที่ รายการคลัสเตอร์จะแสดงตำแหน่งของตัวทำเครื่องหมายเป็นออบเจ็กต์ LatLng และเป็นชื่อหรือตัวอย่างข้อมูลที่ไม่บังคับ
2. เพิ่ม ClusterManager ใหม่เพื่อจัดกลุ่มรายการในคลัสเตอร์ (เครื่องหมาย) ตามระดับการซูม
3. ตั้งค่า OnCameraIdleListener() ของแผนที่เป็น ClusterManager เนื่องจาก ClusterManager ใช้งาน Listener
4. หากคุณต้องการเพิ่มฟังก์ชันที่เฉพาะเจาะจงเพื่อตอบสนองต่อเหตุการณ์การคลิกเครื่องหมาย ให้ตั้งค่า OnMarkerClickListener() ของแผนที่เป็น ClusterManager เนื่องจาก ClusterManager ใช้งาน Listener
5. ป้อนเครื่องหมายไว้ใน ClusterManager

ลองดูขั้นตอนโดยละเอียดในการสร้างคลัสเตอร์แบบง่ายที่มีตัวทำเครื่องหมาย 10 รายการ ให้สร้างคลาส MyItem ที่ใช้ ClusterItem ก่อน

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

      

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

      

ในกิจกรรมแผนที่ ให้เพิ่ม ClusterManager และป้อนรายการคลัสเตอร์ จดอาร์กิวเมนต์ประเภท <MyItem> ซึ่งประกาศว่า ClusterManager เป็นประเภท MyItem

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

      

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

      

คุณยังเลือกปิดใช้ภาพเคลื่อนไหวในการจัดกลุ่มเมื่อซูมเข้าและออกได้อีกด้วย หากภาพเคลื่อนไหวปิดอยู่ ตัวทำเครื่องหมายจะสแนปเข้าตำแหน่งแทนที่จะย้ายเข้าและออกจากคลัสเตอร์ หากต้องการปิดภาพเคลื่อนไหว ให้ใช้ setAnimation() ใน ClusterManager ดังที่แสดงด้านล่าง

clusterManager.setAnimation(false)

      

clusterManager.setAnimation(false);

      

เพิ่มหน้าต่างข้อมูลสำหรับเครื่องหมายที่จัดกลุ่มไว้แต่ละรายการ

หากต้องการเพิ่มหน้าต่างข้อมูลสำหรับตัวทำเครื่องหมายคลัสเตอร์ที่เจาะจง ให้เพิ่มสตริงชื่อและตัวอย่างข้อมูลลงในตัวสร้างการใช้งาน ClusterItem

ตัวอย่างต่อไปนี้เพิ่มเครื่องหมายพร้อมหน้าต่างข้อมูลในเมธอด addItems() โดยตั้งชื่อและตัวอย่างข้อมูล

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

      

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

      

ปรับแต่งคลัสเตอร์เครื่องหมาย

ตัวสร้าง 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> ในลักษณะเดียวกันได้

หากต้องการความช่วยเหลือในการเรียกใช้แอปเดโม โปรดดู คู่มือการตั้งค่า