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

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

บทนำ

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

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

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

หากต้องการใช้ยูทิลิตีการจัดกลุ่มเครื่องหมาย คุณจะต้องเพิ่มเครื่องหมายเป็นออบเจ็กต์ 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

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

      

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
    }

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

      

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

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

      

// 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 ดังที่แสดงด้านล่าง

clusterManager.setAnimation(false);

      

clusterManager.setAnimation(false)

      

เพิ่มหน้าต่างข้อมูลสําหรับเครื่องหมายคลัสเตอร์แต่ละรายการ

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

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

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

      

// 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> ในลักษณะเดียวกันได้ด้วย

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