หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

บทคัดย่อ

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

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

ในโค้ดแล็บนี้ คุณจะได้สร้างแอป iOS ที่ทำสิ่งต่อไปนี้

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

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

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

ข้อกำหนดเบื้องต้น

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

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

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

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

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

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

สร้างบัญชีสำหรับการเรียกเก็บเงิน
สร้างโปรเจ็กต์
เปิดใช้ Google Maps Platform API และ SDK (แสดงอยู่ในส่วนก่อนหน้า)
สร้างคีย์ 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 เพื่อสร้างบัญชีสำหรับการเรียกเก็บเงินและโปรเจ็กต์

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

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

การตั้งค่าเทมเพลต Project Starter

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

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

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

หากต้องการดูโค้ดโซลูชันแบบเต็มที่ทำงานอยู่ ให้ทำตามขั้นตอนการตั้งค่าด้านบนให้เสร็จสมบูรณ์ แล้วดูโซลูชันในไดเรกทอรี /solution/SolutionApp

3. ติดตั้ง Maps SDK สำหรับ iOS

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

เพิ่ม Maps SDK สำหรับ iOS และ Maps SDK สำหรับ iOS Utility Library ลงใน Podfile

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

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

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

ติดตั้ง Maps SDK สำหรับ iOS และพ็อดของ Maps SDK สำหรับ iOS Utility Library

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

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

@import GoogleMaps;

ใต้คำสั่งนำเข้า iOS SDK ให้ประกาศค่าคงที่ NSString โดยตั้งค่าเป็นคีย์ API ของคุณ

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

ส่งคีย์ API ไปยัง iOS SDK โดยการเรียกใช้ 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

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

4. แสดงแผนที่

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

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

เปิด ViewController.m

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

@import GoogleMaps;

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

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

@implementation ViewController {
  GMSMapView *_mapView;
}

ใน loadView ให้สร้างอินสแตนซ์ของ GMSCameraPosition

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

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

ใน loadView ให้สร้างอินสแตนซ์ของ GMSMapView เพื่อสร้างอินสแตนซ์ของแผนที่

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

หากต้องการแสดงแผนที่จริง คุณจะต้องตั้งค่ามุมมองรากของตัวควบคุมมุมมองเป็น _mapview ซึ่งจะทำให้แผนที่แสดงแบบเต็มหน้าจอ

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

ตั้งค่า GMSMapViewDelegate เป็นตัวควบคุมมุมมอง

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

ก่อนอื่น ให้อัปเดตอินเทอร์เฟซของ ViewController ให้เป็นไปตามโปรโตคอลสำหรับ GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

จากนั้นเพิ่มรายการต่อไปนี้เพื่อตั้งค่า GMSMapViewDelegate เป็น ViewController

_mapView.delegate = self;

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

สรุปคือในขั้นตอนนี้ คุณได้สร้างอินสแตนซ์ของ 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. การจัดรูปแบบแผนที่ในระบบคลาวด์ (ไม่บังคับ)

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

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

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

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

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

หากต้องการใช้รหัสแผนที่ที่คุณสร้างในขั้นตอนก่อนหน้า ให้เปิดไฟล์ ViewController.m และสร้างออบเจ็กต์ GMSMapID ภายในเมธอด loadView แล้วระบุรหัสแผนที่ จากนั้นแก้ไขGMSMapViewการเริ่มต้นGMSMapIDโดยระบุออบเจ็กต์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 มาก่อน คุณอาจคุ้นเคยกับเครื่องหมายเริ่มต้นซึ่งมีลักษณะดังนี้

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

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

กำหนดออบเจ็กต์ CLLocationCoordinate2D

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

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

สร้างอินสแตนซ์ของ GMSMarker

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

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

ตั้งค่าไอคอนเครื่องหมายที่กำหนดเอง

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

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

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

แสดงเครื่องหมายในแผนที่

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

marker.map = _mapView;

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

สรุปคือ ในส่วนนี้ คุณได้สร้างอินสแตนซ์ของคลาส GMSMarker และนำไปใช้กับมุมมองแผนที่เพื่อแสดงเครื่องหมายบนแผนที่ เหตุการณ์วงจร 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;
}

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

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

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

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

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

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

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

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

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

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

@import GoogleMapsUtils;

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

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

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

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

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

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

สร้างอินสแตนซ์ของ GMUClusterManager

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

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

จากนั้นสร้างอินสแตนซ์ของ GMUClusterManager ในเหตุการณ์วงจรของ viewDidLoad โดยทำดังนี้

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

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

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

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

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

โดยสรุป ในขั้นตอนนี้ คุณได้กำหนดค่าอินสแตนซ์ของเครื่องหมายคลัสเตอร์จากไลบรารียูทิลิตีของ 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 ซึ่งคุณตั้งค่าไว้ใน ViewController ก่อนหน้านี้ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในแผนที่

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

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

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

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

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

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

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

  return NO;
}

จัดการเหตุการณ์การแตะและเคลื่อนไหวกล้องเพื่อจัดกึ่งกลางแผนที่ใหม่เมื่อมีการแตะเครื่องหมายหรือกลุ่มเครื่องหมาย

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

[_mapView animateToLocation:marker.position];

ซูมเข้าคลัสเตอร์เครื่องหมายเมื่อมีการแตะ

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

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

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

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

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

ตอนนี้ให้โหลดแอปซ้ำแล้วแตะเครื่องหมายและคลัสเตอร์เครื่องหมายบางรายการ เมื่อแตะองค์ประกอบใดองค์ประกอบหนึ่ง แผนที่จะปรับจุดศูนย์กลางใหม่ไปยังองค์ประกอบที่แตะ เมื่อแตะคลัสเตอร์เครื่องหมาย แผนที่จะซูมเข้า 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 เพื่อเพิ่มฟีเจอร์ที่มีประโยชน์เพิ่มเติมลงในประสบการณ์การใช้งานแผนที่

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

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

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

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

โดยอัปเดตการติดตั้งใช้งาน ViewController ดังนี้

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

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

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

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

จัดรูปแบบวงกลม

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

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

แสดงวงกลมบนแผนที่

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

_circ.map = _mapView;

นำวงกลมที่แสดงผลก่อนหน้านี้ออก

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

_circ.map = nil;

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

สรุปคือในขั้นตอนนี้ คุณใช้คลาส 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 จากนั้นลองเพิ่มฟีเจอร์ต่อไปนี้ลงในแผนที่

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

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