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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

หน้านี้อธิบายยูทิลิตีการจัดกลุ่มเครื่องหมายที่มีในไลบรารียูทิลิตีสําหรับ Maps SDK สําหรับ iOS

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

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

ภาพหน้าจอต่อไปนี้แสดงรูปแบบเริ่มต้นของคลัสเตอร์ตัวทําเครื่องหมาย

แผนที่มีเครื่องหมายที่รวมกันในรูปแบบเริ่มต้น

ด้านล่างนี้เป็นตัวอย่างของคลัสเตอร์เครื่องหมายที่กําหนดเอง

แผนที่ที่มีเครื่องหมายคลัสเตอร์ที่กําหนดเอง

เกณฑ์เบื้องต้นและหมายเหตุ

Maps SDK สําหรับไลบรารียูทิลิตีของ iOS

ยูทิลิตีการรวมกลุ่มเครื่องหมายเป็นส่วนหนึ่งของ Maps SDK สําหรับไลบรารียูทิลิตีของ iOS หากยังไม่ได้ตั้งค่าไลบรารี ให้ทําตามคู่มือการตั้งค่าก่อนอ่านส่วนที่เหลือของหน้านี้

จํานวนเครื่องหมายสูงสุดที่แนะนําคือ 10,000 รายการเพื่อประสิทธิภาพที่ดีที่สุด

สิทธิ์เข้าถึงตำแหน่ง

ตัวอย่างนี้ใช้ GPS ของอุปกรณ์เพื่อค้นหาผู้ใช้และแผนที่ในพิกัด หากต้องการเปิดใช้ คุณต้องเพิ่มคําอธิบายลงในสิทธิ์ NSLocationWhenInUseUsageDescription ในไฟล์ Info.plist ของโปรเจ็กต์

หากต้องการเพิ่ม ให้ทําดังนี้

  1. คลิกไฟล์ Info.plist ใน Project Navigator ใน Xcode เพื่อเปิดเครื่องมือแก้ไขรายการพร็อพเพอร์ตี้
  2. คลิกไอคอน '+' ข้าง 'รายการพร็อพเพอร์ตี้ข้อมูล' เพื่อเพิ่มพร็อพเพอร์ตี้ใหม่
  3. ในช่อง 'key' ให้พิมพ์ 'NSLocationWhenInUseusageDescription' Xcode จะแปลงเป็นชื่อยาว 'ความเป็นส่วนตัว - ตําแหน่งเมื่อใช้งานคําอธิบาย' โดยอัตโนมัติ ดูรายการพร็อพเพอร์ตี้สิทธิ์เข้าถึงตําแหน่งที่เป็นไปได้ทั้งหมดได้ที่การขอสิทธิ์สําหรับบริการตําแหน่งในเอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Apple
  4. ตั้งค่าช่อง 'Type' เป็น 'String'
  5. ในช่อง 'ค่า' ให้พิมพ์คําอธิบายเหตุผลที่แอปต้องใช้ ตําแหน่งของผู้ใช้ ตัวอย่างเช่น "ค้นหาผู้ใช้เพื่อให้รายชื่อธุรกิจในละแวกใกล้เคียง&&tt;

การใช้การจัดกลุ่มเครื่องหมาย

การใช้การจัดกลุ่มเครื่องหมายมีสามขั้นตอนดังนี้

  1. สร้างอินสแตนซ์เครื่องมือจัดการคลัสเตอร์
  2. ผ่านเครื่องหมายที่ต้องการจัดกลุ่มไปยังอันตรายของคลัสเตอร์
  3. เรียกใช้ตัวจัดการคลัสเตอร์
หากต้องการดูตัวอย่างทั้งหมดเกี่ยวกับวิธีใช้การจัดกลุ่มเครื่องหมาย ให้ดู Objective-C และ Swift แอปตัวอย่างบน GitHub

การสร้างตัวจัดการคลัสเตอร์

หากต้องการใช้ตัวจัดการคลัสเตอร์ ให้ทําตามขั้นตอนต่อไปนี้

  1. ตั้งค่า ViewController ที่จะให้การแสดงผลแผนที่เป็นไปตามโปรโตคอลของ GMSMapViewDelegate
  2. สร้างอินสแตนซ์ GMUClusterManager
  3. ส่งอินสแตนซ์ของ GMSMapView ที่คุณต้องการใช้กับการจัดกลุ่มเครื่องหมายและการติดตั้งใช้งานโปรโตคอลต่อไปนี้กับอินสแตนซ์ GMUClusterManager
    • GMUClusterIconGenerator: ระบุตรรกะแอปพลิเคชันที่ดึงข้อมูลไอคอนคลัสเตอร์เพื่อให้ใช้ที่ระดับการซูมต่างๆ
    • GMUClusterAlgorithm: ระบุอัลกอริทึมที่กําหนดพฤติกรรม ของการจัดกลุ่มเครื่องหมาย เช่น ระยะทางระหว่างเครื่องหมายที่จะรวมไว้ในคลัสเตอร์เดียวกัน
    • GMUClusterRenderer: มีตรรกะของแอปพลิเคชันที่จัดการการแสดงผลจริงของไอคอนคลัสเตอร์ในแผนที่
  4. ตั้งค่าผู้มอบสิทธิ์แผนที่บนอินสแตนซ์ GMUClusterManager

ไลบรารียูทิลิตีมีโปรแกรมสร้างไอคอนเริ่มต้น (GMUDefaultClusterIconGenerator) อัลกอริทึม (GMUNonHierarchicalDistanceBasedAlgorithm) และตัวแสดงผล (GMUDefaultClusterRenderer) เริ่มต้น คุณอาจสร้างตัวสร้างไอคอนที่กําหนดเอง อัลกอริทึม และตัวแสดงผลของไอคอนที่กําหนดเองได้

โค้ดต่อไปนี้สร้างตัวจัดการคลัสเตอร์โดยใช้ค่าเริ่มต้นเหล่านี้ในการเรียกกลับ viewDidLoad ของ ViewController

Swift

import GoogleMaps
import GoogleMapsUtils

class MarkerClustering: UIViewController, GMSMapViewDelegate {
  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Set up the cluster manager with the supplied icon generator and
    // renderer.
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView,
                                clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm,
                                                      renderer: renderer)

    // Register self to listen to GMSMapViewDelegate events.
    clusterManager.setMapDelegate(self)
    // ...
  }
  // ...
}

Objective-C

@import GoogleMaps;
@import GoogleMapsUtils;

@interface MarkerClustering () <GMSMapViewDelegate>

@end

@implementation MarkerClustering {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  // Set up the cluster manager with a supplied icon generator and renderer.
  id<GMUClusterAlgorithm> algorithm =
      [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> iconGenerator =
      [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer =
      [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView
                                    clusterIconGenerator:iconGenerator];
  _clusterManager =
      [[GMUClusterManager alloc] initWithMap:_mapView
                                   algorithm:algorithm
                                    renderer:renderer];

  // Register self to listen to GMSMapViewDelegate events.
  [_clusterManager setMapDelegate:self];
  // ...
}
// ...
@end

การเพิ่มเครื่องหมาย

คุณสามารถเพิ่มเครื่องหมายไปยังคลัสเตอร์ของตัวทําเครื่องหมายได้ 2 วิธี ได้แก่ แบบเดี่ยวหรืออาร์เรย์

ตัวทําเครื่องหมายแต่ละรายการ

Swift

let position = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.33)
let marker = GMSMarker(position: position)
clusterManager.add(marker)

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(47.60, -122.33);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
[_clusterManager addItem:marker];

อาร์เรย์ของเครื่องหมาย

Swift

let position1 = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.33)
let marker1 = GMSMarker(position: position1)

let position2 = CLLocationCoordinate2D(latitude: 47.60, longitude: -122.46)
let marker2 = GMSMarker(position: position2)

let position3 = CLLocationCoordinate2D(latitude: 47.30, longitude: -122.46)
let marker3 = GMSMarker(position: position3)

let position4 = CLLocationCoordinate2D(latitude: 47.20, longitude: -122.23)
let marker4 = GMSMarker(position: position4)

let markerArray = [marker1, marker2, marker3, marker4]
clusterManager.add(markerArray)

Objective-C

CLLocationCoordinate2D position1 = CLLocationCoordinate2DMake(47.60, -122.33);
GMSMarker *marker1 = [GMSMarker markerWithPosition:position1];

CLLocationCoordinate2D position2 = CLLocationCoordinate2DMake(47.60, -122.46);
GMSMarker *marker2 = [GMSMarker markerWithPosition:position2];

CLLocationCoordinate2D position3 = CLLocationCoordinate2DMake(47.30, -122.46);
GMSMarker *marker3 = [GMSMarker markerWithPosition:position3];

CLLocationCoordinate2D position4 = CLLocationCoordinate2DMake(47.20, -122.23);
GMSMarker *marker4 = [GMSMarker markerWithPosition:position4];

NSArray<GMSMarker *> *markerArray = @[marker1, marker2, marker3, marker4];
[_clusterManager addItems:markerArray];

การเรียกใช้เครื่องมือจัดกลุ่มเครื่องหมาย

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

Swift

clusterManager.cluster()

Objective-C

[_clusterManager cluster];

จัดการกิจกรรมเกี่ยวกับเครื่องหมายและคลัสเตอร์

โดยทั่วไปเมื่อใช้ Maps SDK สําหรับ iOS หากต้องการฟังเหตุการณ์บนแผนที่ คุณต้องใช้โปรโตคอล GMSMapViewDelegate คุณฟังเหตุการณ์เกี่ยวกับแผนที่ได้ แต่ฟังเหตุการณ์ของตัวจัดการคลัสเตอร์ที่ปลอดภัยประเภทไม่ได้ เมื่อผู้ใช้แตะเครื่องหมาย รายการคลัสเตอร์แต่ละรายการ หรือคลัสเตอร์ API จะทริกเกอร์ mapView:didTapMarker: และแนบข้อมูลคลัสเตอร์เพิ่มเติมลงในพร็อพเพอร์ตี้ marker.userData จากนั้นจึงตรวจสอบว่า userData เป็นไปตามโปรโตคอล GMUCluster หรือไม่เพื่อให้แน่ใจว่ามีการแตะไอคอนคลัสเตอร์หรือเครื่องหมายหรือไม่

Swift

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
  // center the map on tapped marker
  mapView.animate(toLocation: marker.position)
  // check if a cluster icon was tapped
  if marker.userData is GMUCluster {
    // zoom in on tapped cluster
    mapView.animate(toZoom: mapView.camera.zoom + 1)
    NSLog("Did tap cluster")
    return true
  }

  NSLog("Did tap a normal marker")
  return false
}

Objective-C

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  // center the map on tapped marker
    [_mapView animateToLocation:marker.position];
    // check if a cluster icon was tapped
    if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
      // zoom in on tapped cluster
      [_mapView animateToZoom:_mapView.camera.zoom + 1];
      NSLog(@"Did tap cluster");
      return YES;
    }

    NSLog(@"Did tap marker in cluster");
    return NO;
}

เครื่องมือจัดการคลัสเตอร์จะดักจับเหตุการณ์ที่คุณได้ติดตั้งใช้งานเมื่อ clusterManager โดยจะส่งต่อกิจกรรมที่เหลือไปยังผู้รับมอบสิทธิ์ของแผนที่ (หากมี) โปรดทราบว่าเหตุการณ์ของตัวทําเครื่องหมายมาตรฐาน (กล่าวคือ ตัวทําเครื่องหมายที่ไม่ได้สร้างโดยตัวแสดงผลคลัสเตอร์) จะส่งต่อไปยังผู้รับมอบสิทธิ์แผนที่เสมอ

ปรับแต่งการจัดกลุ่มเครื่องหมาย

คุณอาจระบุการใช้งานที่กําหนดเองสําหรับ GMUClusterRenderer, GMUClusterIconGenerator หรือ GMUClusterAlgorithm คุณยึดการติดตั้งใช้งานที่กําหนดเองไว้ตามตัวอย่างโปรโตคอลเหล่านี้ที่อยู่ในไลบรารียูทิลิตีได้ หรืออาจเขียนโค้ดการใช้งานที่กําหนดเองอย่างเต็มรูปแบบได้ด้วยการทําตามโปรโตคอล