เพิ่มแผนที่ในแอป iOS (Objective-C)

เพิ่มแผนที่ในแอป iOS (Objective-C)

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ พ.ค. 11, 2022
account_circleเขียนโดย Google Maps Platform Team

1 ก่อนที่คุณจะเริ่มต้น

บทคัดย่อ

ใน Codelab นี้ คุณจะได้เรียนรู้ทุกสิ่งที่จําเป็นสําหรับการเริ่มต้นใช้งาน Google Maps Platform สําหรับการสร้างแอป iOS ใน Objective-C คุณจะได้เรียนรู้ข้อมูลเบื้องต้นทั้งหมดตั้งแต่การตั้งค่าไปจนถึงการโหลด Maps SDK สําหรับ iOS การแสดงแผนที่แรก การทํางานร่วมกับเครื่องหมายและการจัดกลุ่มเครื่องหมาย การวาดบนแผนที่ และการจัดการการโต้ตอบของผู้ใช้

สิ่งที่คุณจะสร้าง

342520482a888519.png

ใน Codelab นี้ คุณจะสร้างแอป iOS ที่ทําสิ่งต่อไปนี้ได้

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

สิ่งที่คุณจะได้เรียนรู้

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

สิ่งที่ต้องมีก่อน

คุณจะต้องทําความคุ้นเคยกับรายการด้านล่างนี้เพื่อสิ้นสุด Codelab นี้ หากคุณคุ้นเคยกับการใช้งาน Google Maps Platform อยู่แล้ว ให้ข้ามไปที่ Codelab ได้เลย

ผลิตภัณฑ์ Google Maps Platform ที่จําเป็น

ใน Codelab นี้ คุณจะใช้ผลิตภัณฑ์ Google Maps Platform ต่อไปนี้

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

เริ่มต้นใช้งาน Google Maps Platform

หากคุณไม่เคยใช้ Google Maps Platform มาก่อน ให้ทําตามคู่มือเริ่มต้นใช้งาน Google Maps Platform หรือดูเพลย์ลิสต์การเริ่มต้นใช้งาน Google Maps Platform เพื่อทําตามขั้นตอนต่อไปนี้

  1. สร้างบัญชีสําหรับการเรียกเก็บเงิน
  2. สร้างโปรเจ็กต์
  3. เปิดใช้ Google Maps Platform API และ SDK (แสดงอยู่ในส่วนก่อนหน้า)
  4. สร้างคีย์ API

ข้อกําหนดอื่นๆ สําหรับ Codelab นี้

หากต้องการให้ Codelab นี้เสร็จสมบูรณ์ คุณจะต้องมีบัญชี บริการ และเครื่องมือต่อไปนี้

  • บัญชี Google Cloud Platform ที่เปิดใช้การเรียกเก็บเงิน
  • คีย์ API ของ Google Maps Platform ที่เปิดใช้ Maps SDK สําหรับ iOS
  • ความรู้เบื้องต้นเกี่ยวกับ Objective-C
  • Xcode 12.0 ที่มี SDK เป้าหมายเป็น 12.0 ขึ้นไป

2 ตั้งค่า

สําหรับขั้นตอนการเปิดใช้ที่ด้านล่าง คุณจะต้องเปิดใช้ Maps SDK สําหรับ iOS

ตั้งค่า Google Maps Platform

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

  1. ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สําหรับ Codelab นี้

  1. เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับ Codelab นี้ใน Google Cloud Marketplace โดยทําตามขั้นตอนในวิดีโอนี้หรือเอกสารนี้
  2. สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทําตามขั้นตอนในวิดีโอนี้หรือเอกสารนี้ คําขอทั้งหมดสําหรับ Google Maps Platform ต้องใช้คีย์ API

การตั้งค่าเทมเพลตเริ่มต้นของโปรเจ็กต์

ก่อนเริ่มต้น Codelab นี้ ให้ดําเนินการต่อไปนี้เพื่อดาวน์โหลดเทมเพลตโปรเจ็กต์เริ่มต้นและโค้ดโซลูชันที่สมบูรณ์

  1. ดาวน์โหลดหรือแยกที่เก็บ GitHub สําหรับ Codelab นี้ที่ https://github.com/googlecodelabs/maps-platform-101-objc

โปรเจ็กต์ StarterApp อยู่ในไดเรกทอรี /starter และมีโครงสร้างไฟล์พื้นฐานที่คุณจะต้องทํา Codelab ให้เสร็จสมบูรณ์ ข้อมูลทั้งหมดที่คุณจําเป็นต้องใช้จะอยู่ในไดเรกทอรี /starter/StarterApp

หากต้องการดูรหัสโซลูชันทั้งหมดที่ทํางานอยู่ คุณสามารถทําตามขั้นตอนการตั้งค่าด้านบนและดูโซลูชันในไดเรกทอรี /solution/SolutionApp ได้

3 ติดตั้ง Maps SDK สําหรับ iOS

ขั้นตอนแรกในการใช้ Maps SDK สําหรับ iOS คือการติดตั้งทรัพยากร Dependency ที่จําเป็น กระบวนการมี 2 ขั้นตอน ได้แก่ ติดตั้ง Maps SDK สําหรับ iOS และ Maps SDK สําหรับ iOS Utility Library จากเครื่องมือจัดการทรัพยากรร่วมของ Cocoapods และการระบุคีย์ API ไปยัง SDK

  1. เพิ่ม Maps SDK สําหรับ iOS และ Maps SDK สําหรับไลบรารียูทิลิตีของ iOS ลงใน Podfile

ใน Codelab นี้ คุณจะใช้ทั้ง Maps SDK สําหรับ iOS ซึ่งมีฟังก์ชันหลักของ Google Maps ทั้งหมด และ Maps iOS Utility Library ซึ่งมียูทิลิตีที่หลากหลายสําหรับปรับปรุงแผนที่ ซึ่งรวมถึงการจัดกลุ่มด้วยเครื่องหมาย

หากต้องการเริ่มต้น ใน Xcode (หรือเครื่องมือแก้ไขข้อความที่ต้องการ) ให้เปิด Pods > Podfile และอัปเดตไฟล์ให้รวม Maps SDK สําหรับทรัพยากร Dependency ของ iOS และไลบรารียูทิลิตีไว้ภายใน use_frameworks! ดังนี้

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  1. ติดตั้ง Maps SDK สําหรับ iOS และ Maps SDK สําหรับพ็อดไลบรารียูทิลิตีของ iOS

หากต้องการติดตั้งทรัพยากร Dependency ให้เรียกใช้ pod install ในไดเรกทอรี /starter จากบรรทัดคําสั่ง Cocoapods จะดาวน์โหลดทรัพยากร Dependency โดยอัตโนมัติ รวมถึงสร้าง StarterApp.xcworkspace ด้วย 3. เมื่อติดตั้งทรัพยากร Dependency แล้ว ให้เปิด StarterApp.xcworkspace ใน Xcode จากนั้นเรียกใช้แอปในเครื่องจําลองของ iPhone โดยกด Command+R หากตั้งค่าทุกอย่างอย่างถูกต้อง เครื่องจําลองจะเปิดและแสดงหน้าจอสีดํา ไม่ต้องกังวล คุณยังไม่ได้สร้างอะไรเลย เพราะอย่างนี้ก็เป็นไปตามที่คาดไว้ 4. นําเข้า SDK ใน AppDelegate.h

เมื่อติดตั้งทรัพยากร Dependency แล้ว ก็ถึงเวลาระบุคีย์ API ให้กับ SDK ขั้นตอนแรกคือการนําเข้า Maps SDK สําหรับ iOS เป็นทรัพยากร Dependency ด้วยการระบุข้อมูลต่อไปนี้ในส่วนคําสั่งนําเข้า #import "AppDelegate.h"

@import GoogleMaps;
  1. ใต้คําสั่งนําเข้า SDK ของ iOS ให้ประกาศค่าคงที่ NSString ด้วยค่าที่กําหนดให้กับคีย์ API ดังนี้
static NSString *const kMapsAPIKey = @"YOUR API KEY";
  1. ส่งผ่านคีย์ API ไปยัง SDK ของ iOS โดยเรียก provideAPIKey บน GMSServices ใน application: didFinishLaunchingWithOptions:
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

ตอนนี้ไฟล์ AppDelegate.m ที่อัปเดตควรมีลักษณะดังนี้

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Podfile ควรมีลักษณะดังนี้

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

เมื่อติดตั้งทรัพยากร Dependency แล้วและคีย์ API พร้อมใช้งาน คุณก็พร้อมที่จะเริ่มเรียกใช้ Maps SDK สําหรับ iOS แล้ว

4 แสดงแผนที่

ได้เวลาแสดงแผนที่แรกแล้ว

ส่วนที่มีการใช้บ่อยที่สุดใน Maps SDK สําหรับ iOS คือคลาส GMSMapView ซึ่งมีวิธีการต่างๆ มากมายที่ช่วยให้สร้างและจัดการอินสแตนซ์แผนที่ได้ วิธีการมีดังนี้

  1. เปิด ViewController.m

นี่คือที่ที่คุณจะทํางานที่เหลือทั้งหมดสําหรับ Codelab นี้ คุณจะสังเกตเห็นเหตุการณ์ในวงจรของ loadView และ viewDidLoad สําหรับเครื่องมือควบคุมการดูมีการล้างออกไปแล้ว 2. นําเข้า Maps SDK สําหรับ iOS โดยเพิ่มโค้ดต่อไปนี้ที่ด้านบนของไฟล์

@import GoogleMaps;
  1. ประกาศตัวแปรอินสแตนซ์ ViewController เพื่อจัดเก็บ GMSMapView

อินสแตนซ์ของ GMSMapView เป็นออบเจ็กต์หลักที่คุณจะใช้งานตลอด Codelab นี้ และคุณจะอ้างอิงและดําเนินการกับโค้ดดังกล่าวจากเมธอดต่างๆ ในวงจรของตัวควบคุมมุมมอง หากต้องการให้ใช้งานได้ ให้อัปเดตการใช้งาน ViewController เพื่อประกาศตัวแปรอินสแตนซ์เพื่อจัดเก็บ:

@implementation ViewController {
  GMSMapView *_mapView;
}
  1. ใน loadView ให้สร้างอินสแตนซ์ GMSCameraPosition

GMSCameraPosition จะกําหนดจุดศูนย์กลางของแผนที่และการซูมที่จะแสดง โค้ดนี้เรียกใช้เมธอด cameraWithLatitude:longitude:zoom: เพื่อให้การจัดกึ่งกลางแผนที่ในซิดนีย์ ออสเตรเลีย ที่ละติจูด -33.86 และลองจิจูด 151.20 โดยมีระดับการซูมอยู่ที่ 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  1. ใน loadView ให้สร้างอินสแตนซ์ GMSMapView เพื่อสร้างอินสแตนซ์แผนที่

หากต้องการสร้างอินสแตนซ์แผนที่ใหม่ โปรดเรียก mapWithFrame:camera: โปรดตั้งค่าเฟรมเป็น CGRectZero ซึ่งเป็นตัวแปรร่วมจากไลบรารี CGGeometry ของ iOS ที่ระบุเฟรมความกว้าง 0 ความสูง 0 ในตําแหน่ง (0,0) ภายในตัวควบคุมมุมมอง กล้องจะตั้งค่าให้เป็นตําแหน่งกล้องที่เพิ่งสร้าง

ที่จะแสดงแผนที่ในขั้นตอนถัดไป ให้ตั้งค่ามุมมองรูทของตัวควบคุมมุมมองเป็น _mapview ซึ่งจะทําให้แผนที่แสดงเต็มหน้าจอ

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
  1. ตั้งค่า GMSMapViewDelegate เป็นตัวควบคุมมุมมอง

เมื่อใช้งาน ผู้รับมอบสิทธิ์มุมมองแผนที่จะอนุญาตให้คุณจัดการเหตุการณ์จากการโต้ตอบของผู้ใช้ในอินสแตนซ์ GMSMapView ซึ่งคุณจะต้องใช้ในขั้นตอนต่อไป

ขั้นแรก ให้อัปเดตอินเทอร์เฟซของ ViewController ให้สอดคล้องกับโปรโตคอลของ GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

ต่อไป ให้เพิ่มสิ่งต่อไปนี้เพื่อตั้งค่า GMSMapViewDelegate เป็น ViewController

_mapView.delegate = self;

โหลดแอปนี้ซ้ําในเครื่องจําลอง iOS (Command+R) แล้วแผนที่ก็จะปรากฏขึ้น

ไฟล์ 2e6ebac422323aa6.png

เพื่อเป็นการสรุป ขั้นตอนนี้คุณได้สร้างอินสแตนซ์ของ GMSMapView เพื่อแสดงแผนที่ซึ่งมีจุดศูนย์กลางอยู่ที่เมืองซิดนีย์ ประเทศออสเตรเลีย

ตอนนี้ไฟล์ ViewController.m ควรมีลักษณะดังนี้

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5 การจัดรูปแบบแผนที่ในระบบคลาวด์ (ไม่บังคับ)

คุณสามารถปรับแต่งรูปแบบแผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

สร้างรหัสแผนที่

หากคุณยังไม่ได้สร้างรหัสแผนที่ที่มีรูปแบบแผนที่เชื่อมโยงอยู่ โปรดดูคู่มือรหัสแผนที่เพื่อทําตามขั้นตอนต่อไปนี้

  1. สร้างรหัสแผนที่
  2. เชื่อมโยงรหัสแผนที่กับรูปแบบแผนที่

การเพิ่มรหัสแผนที่ลงในแอป

หากต้องการใช้รหัสแผนที่ที่คุณสร้างไว้ในขั้นตอนก่อนหน้า ให้เปิดไฟล์ ViewController.m แล้วสร้างออบเจ็กต์ GMSMapID ลงในเมธอด loadView แล้วระบุรหัสแผนที่ ถัดไป ให้แก้ไขอินสแตนซ์ GMSMapView โดยระบุออบเจ็กต์ GMSMapID เป็นพารามิเตอร์

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

เมื่อเสร็จแล้ว ให้เรียกใช้แอปเพื่อดูแผนที่ในรูปแบบที่คุณเลือก

6 เพิ่มเครื่องหมายลงในแผนที่

มีหลายสิ่งที่นักพัฒนาซอฟต์แวร์ทํากับ Maps SDK สําหรับ iOS แต่การทําให้เครื่องหมายบนแผนที่ได้รับความนิยมมากที่สุด เครื่องหมายทําให้คุณสามารถแสดงจุดที่เจาะจงบนแผนที่ และเป็นองค์ประกอบ UI ทั่วไปในการจัดการการโต้ตอบของผู้ใช้ หากคุณเคยใช้ Google Maps มาก่อน คุณคงคุ้นเคยกับเครื่องหมายเริ่มต้นแล้ว ซึ่งมีลักษณะดังนี้

590815267846f166.png

ในขั้นตอนนี้ คุณจะได้เรียนรู้วิธีใช้ชั้นเรียน GMSMarker เพื่อวางเครื่องหมายบนแผนที่

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

  1. กําหนดออบเจ็กต์ CLLocationCoordinate2D

CLLocationCoordinate2D คือโครงสร้างที่ไลบรารี CoreLocation ของ iOS กําหนดไว้ ซึ่งจะระบุตําแหน่งทางภูมิศาสตร์ที่ละติจูดและลองจิจูดที่กําหนดไว้ หากต้องการเริ่มต้นสร้างเครื่องหมายแรก ให้กําหนดวัตถุ CLLocationCoordinate2D และกําหนดละติจูดและลองจิจูดให้กับศูนย์กลางของแผนที่ พิกัดของจุดศูนย์กลางของแผนที่สามารถเข้าถึงได้จากมุมมองแผนที่โดยใช้พร็อพเพอร์ตี้ camera.target.latitude และ camera.target.longitude

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  1. สร้างอินสแตนซ์ของ GMSMarker

Maps SDK สําหรับ iOS มีคลาส GMSMarker แต่ละอินสแตนซ์ของ GMSMarker จะแสดงเครื่องหมายแต่ละรายการบนแผนที่ และสร้างขึ้นด้วยการเรียกใช้ markerWithPosition: และส่งผ่านออบเจ็กต์ CLLocationCoordinate2D เพื่อบอก SDK ว่าจะวางเครื่องหมายไว้ที่ใดบนแผนที่.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  1. ตั้งค่าไอคอนตัวทําเครื่องหมายที่กําหนดเอง

เครื่องหมายหมุดสีแดงเริ่มต้นสําหรับ Google Maps ยอดเยี่ยมมาก แต่การปรับแต่งแผนที่ของคุณก็เช่นกัน โชคดีที่การใช้เครื่องหมายที่กําหนดเองนั้นทําได้ง่ายมากด้วย Maps SDK สําหรับ iOS คุณจะสังเกตเห็นว่าโปรเจ็กต์ StarterApp มีรูปภาพชื่อว่า "custom_pin.png&#39

หากต้องการตั้งค่าเครื่องหมายที่กําหนดเอง ให้ตั้งค่าพร็อพเพอร์ตี้ icon ของเครื่องหมายเป็นอินสแตนซ์ของ UIImage

marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  1. แสดงผลเครื่องหมายบนแผนที่

เครื่องหมายของคุณสร้างขึ้น แต่คุณจะเห็นว่าเครื่องหมาย&#39 นั้นไม่อยู่ในแผนที่ ในการดําเนินการนี้ ให้ตั้งค่าพร็อพเพอร์ตี้ map ของอินสแตนซ์ GMSMarker เป็นอินสแตนซ์ของ GMSMapView

marker.map = _mapView;

โหลดแอปนี้ซ้ําแล้วทําเครื่องหมายด้วยแผนที่แรกด้วยเครื่องหมาย

a4ea8724f8c5ba20.png

สรุปแล้วในส่วนนี้ คุณสร้างอินสแตนซ์ของคลาส GMSMarker และนําไปใช้กับมุมมองแผนที่เพื่อแสดงเครื่องหมายบนแผนที่ เหตุการณ์สําคัญในวงจรของ viewdoesLoad ที่อัปเดตแล้วใน ViewController.m ควรมีลักษณะดังนี้

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

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

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

6e39736160c6bce4.png

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

ไฟล์ 4abb38cd97cab3f1.png

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

  1. เพิ่มเครื่องหมายอีกมากในแผนที่

หากต้องการดูเครื่องหมายต่างๆ รวมกลุ่มกันอยู่ คุณจะต้องมีเครื่องหมายจํานวนมากบนแผนที่ เราได้จัดเตรียมโปรแกรมสร้างเครื่องหมายไว้ให้คุณในโปรเจ็กต์เริ่มต้นใน LocationGenerator.m เพื่อให้คุณดําเนินการดังกล่าวได้ง่ายขึ้น

หากต้องการเพิ่มเครื่องหมายลงในแผนที่ได้มากเท่าที่ต้องการ เพียงเรียกใช้ generateMarkersNear:count: ในวงจรควบคุมมุมมอง viewDidLoad ด้านล่างโค้ดจากขั้นตอนก่อนหน้า วิธีนี้สร้างจํานวนเครื่องหมายที่ระบุใน count ที่ตําแหน่งแบบสุ่มรอบๆ พิกัดที่ระบุในออบเจ็กต์ CLLocationCoordinate2D ในกรณีนี้ คุณส่งตัวแปร mapCenter ที่สร้างไว้ก่อนหน้านี้ได้ เครื่องหมายจะแสดงผลใน NSArray

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
  1. นําเข้า Google Maps SDK สําหรับไลบรารียูทิลิตีของ iOS

หากต้องการเพิ่มไลบรารียูทิลิตีของ iOS ในการพึ่งพาโปรเจ็กต์ ให้เพิ่มทรัพยากรต่อไปนี้ลงในรายการทรัพยากร Dependency ที่ด้านบนสุดของ ViewController.m

@import GoogleMapsUtils;
  1. กําหนดค่าตัวทําเครื่องหมายเครื่องหมาย

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

คุณสามารถเขียนทั้งหมดนี้ตั้งแต่ต้นได้หากต้องการ แต่ไลบรารียูทิลิตีของ Maps สําหรับ iOS จะมีการใช้งานเริ่มต้นที่ทําให้กระบวนการนี้ง่าย เพียงเพิ่มสิ่งต่อไปนี้

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  1. สร้างอินสแตนซ์ของ GMUClusterManager

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

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

ถัดไป สร้างอินสแตนซ์ของ GMUClusterManager ในเหตุการณ์อายุการใช้งานของ viewDidLoad

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
  1. เพิ่มเครื่องหมายและเรียกใช้ตัวทําเครื่องหมายเครื่องหมาย

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

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

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

c49383b07752bfc4.png

สรุปคือ ในขั้นตอนนี้คุณได้กําหนดค่าอินสแตนซ์ของตัวทําเครื่องหมายเครื่องหมายจาก Google Maps SDK สําหรับไลบรารียูทิลิตีของ iOS จากนั้นจึงใช้เพื่อจัดกลุ่มเครื่องหมาย 100 รายการบนแผนที่ เหตุการณ์ในวงจรของ viewDidLoad ใน ViewController.m ควรมีลักษณะดังนี้

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8 เพิ่มการโต้ตอบของผู้ใช้

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

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

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

  1. ติดตั้ง Listener การใช้เครื่องหมาย

ระบบจะเรียกใช้ mapView:didTapMarker ทุกครั้งที่ผู้ใช้แตะเครื่องหมายที่คุณสร้างก่อนหน้านี้ รวมทั้งทุกครั้งที่ผู้ใช้แตะคลัสเตอร์เครื่องหมาย (ระบบจะติดตั้งคลัสเตอร์เครื่องหมายภายในเป็นอินสแตนซ์ของ GMSMarker)

หากต้องการใช้งาน Listener เหตุการณ์ ให้เริ่มต้นด้วยการขัดเกลาที่ท้าย ViewController.m ก่อนคําสั่ง end

คุณจะสังเกตเห็นว่าเมธอดกําลังแสดงผล NO การดําเนินการนี้จะบอกให้ iOS SDK เรียกใช้ฟังก์ชัน GMSMarker เริ่มต้นต่อไปได้ เช่น แสดงหน้าต่างข้อมูลหากมีการกําหนดค่า หลังจากเรียกใช้โค้ดเครื่องจัดการเหตุการณ์

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}
  1. จัดการเหตุการณ์การแตะและทําให้กล้องเคลื่อนไหวเพื่อปรับแผนที่ให้ใหญ่ขึ้นเมื่อมีการแตะเครื่องหมายหรือคลัสเตอร์เครื่องหมาย

เมื่อโทรออก mapView:didTapMarker จะส่งอินสแตนซ์ของ GMSMarker ที่แตะไป ซึ่งช่วยให้คุณจัดการโค้ดดังกล่าวได้ คุณสามารถใช้อินสแตนซ์นี้เพื่อจัดกึ่งกลางแผนที่อีกครั้งได้โดยเรียก animateToLocation: ในมุมมองแผนที่จากเครื่องจัดการเหตุการณ์ แล้วส่งต่อตําแหน่งของอินสแตนซ์เครื่องหมาย ซึ่งมีอยู่ในพร็อพเพอร์ตี้ position

[_mapView animateToLocation:marker.position];
  1. ซูมเข้าบนคลัสเตอร์เครื่องหมายเมื่อแตะ

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

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

เมื่อรู้แบบเป็นโปรแกรมแล้วว่าแตะคลัสเตอร์แล้ว คุณจะสามารถเรียก animateToZoom: ในอินสแตนซ์มุมมองแผนที่ แล้วตั้งค่าการซูมเป็นระดับการซูมปัจจุบันบวกกับ 1 ระดับการซูมปัจจุบันมีอยู่ในอินสแตนซ์มุมมองแผนที่ในพร็อพเพอร์ตี้ camera.zoom

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

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

โหลดแอปซ้ําแล้วแตะเครื่องหมายและคลัสเตอร์เครื่องหมายที่ต้องการ เมื่อแตะครบทั้ง 2 ส่วน แผนที่จะจัดพอดีกับองค์ประกอบที่แตะไว้ เมื่อแตะคลัสเตอร์เครื่องหมาย การซูมจะซูมลง 1 ระดับ และคลัสเตอร์เครื่องหมายจะขยายเพื่อแสดงเครื่องหมายที่จัดกลุ่มอยู่ด้านล่าง

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

เมธอด mapView:didTapMarker ของคุณควรมีลักษณะดังนี้

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9 วาดบนแผนที่

ที่ผ่านมาคุณได้สร้างแผนที่ซิดนีย์ที่แสดงเครื่องหมายแบบสุ่มที่จุด 100 จุด และจัดการการโต้ตอบของผู้ใช้ สําหรับขั้นตอนสุดท้ายของ Codelab นี้ คุณจะต้องใช้ฟีเจอร์วาดภาพของ Maps SDK สําหรับ iOS เพื่อเพิ่มฟีเจอร์ที่เป็นประโยชน์อื่นๆ ลงในประสบการณ์แผนที่ของคุณ

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

iOS SDK ประกอบด้วยชุดฟังก์ชันสําหรับการวาดรูปร่างบนแผนที่ เช่น สี่เหลี่ยมจัตุรัส รูปหลายเหลี่ยม เส้น และวงกลม ถัดจากนั้น คุณจะวาดวงกลมเพื่อแสดงรัศมี 800 เมตร (ประมาณครึ่งไมล์) รอบๆ เครื่องหมายเมื่อคลิก

  1. เพิ่มตัวแปรอินสแตนซ์ _circ ในการใช้งาน ViewController

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

ซึ่งทําได้โดยการอัปเดตการใช้งาน ViewController ในลักษณะนี้

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}
  1. วาดวงกลมเมื่อแตะเครื่องหมาย

ที่ด้านล่างของเมธอด mapView:didTapMarker ให้เพิ่มโค้ดต่อไปนี้เพื่อสร้างอินสแตนซ์ของคลาส GMSCircle ของ iOS SDK สําหรับวาดวงกลมรัศมีใหม่ 800 เมตรโดยเรียกใช้ circleWithPosition:radius: และส่งตําแหน่งของเครื่องหมายที่แตะแบบเดียวกับที่คุณทําด้านบนเมื่อจัดตําแหน่งแผนที่ใหม่

_circ = [GMSCircle circleWithPosition:marker.position radius:800];
  1. จัดรูปแบบวงกลม

โดยค่าเริ่มต้น GMSCircle จะวาดวงกลมโดยมีเส้นสีดําและสีเติมแบบโปร่งใส สถานที่จะทําให้เห็นรัศมี แต่ไม่ค่อยดีและมองเห็นยากเล็กน้อย ถัดไปให้วงกลมสีเติมวงกลมเพื่อปรับปรุงการจัดรูปแบบโดยกําหนด UIColor เป็นพร็อพเพอร์ตี้ fillColor ของวงกลม โค้ดต่อไปนี้จะเพิ่มอัตราการส่งโฆษณาสีเทาด้วยความโปร่งใส 50%

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  1. แสดงวงกลมบนแผนที่

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

_circ.map = _mapView;
  1. นําแวดวงที่แสดงผลก่อนหน้านี้ออก

ดังที่กล่าวไว้ก่อนหน้า ประสบการณ์การใช้งานแวดวงที่เพิ่มวงกลมให้กับแผนที่นั้นไม่ใช่ประสบการณ์ที่ดีนัก หากต้องการนําแวดวงที่แสดงผลจากเหตุการณ์การแตะก่อนหน้านี้ออก ให้ตั้งค่าพร็อพเพอร์ตี้ map ของ _circ เป็น nil ที่ด้านบนของ mapView:didTapMarker

_circ.map = nil;

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

342520482a888519.png

สรุปคือในขั้นตอนนี้คุณใช้คลาส GMSCircle แสดงผลวงกลมเมื่อแตะเครื่องหมาย

เมธอด mapView:didTapMarker ของคุณควรมีลักษณะดังนี้

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10 ยินดีด้วย

คุณได้สร้างแอป iOS แอปแรกโดยใช้ Google Maps Platform รวมถึงการโหลด Maps SDK สําหรับ iOS, การโหลดแผนที่, การทํางานกับเครื่องหมาย, การควบคุมและการวาดภาพบนแผนที่ และเพิ่มการโต้ตอบของผู้ใช้เรียบร้อยแล้ว

หากต้องการดูรหัสที่เสร็จสมบูรณ์ ลองดูว่าโปรเจ็กต์ที่สร้างเสร็จแล้วคือไดเรกทอรี /solution

มีอะไรอีกบ้าง

ใน Codelab นี้ เราได้พูดถึงข้อมูลพื้นฐานของสิ่งที่คุณทําได้ด้วย Maps SDK สําหรับ iOS เท่านั้น จากนั้นลองเพิ่มฟีเจอร์บางอย่างต่อไปนี้ลงในแผนที่

หากต้องการดูวิธีอื่นๆ ในการทํางานร่วมกับ Google Maps Platform บนเว็บต่อ โปรดไปที่ลิงก์ต่อไปนี้

bug_report รายงานความผิดพลาด