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

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

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

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

Codelab นี้จะสอนวิธีใช้ Google Maps Platform สําหรับการสร้างแอป iOS ใน Swift คุณจะสร้างแอป iOS ที่ทําสิ่งต่อไปนี้ได้

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

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

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

ความรู้เบื้องต้นเกี่ยวกับการพัฒนา Swift และ iOS

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

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

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

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

Xcode 12.0 ขึ้นไปที่มี SDK เป้าหมายเป็น 12.0 ขึ้นไป
ติดตั้ง Cocoapods แล้ว
บัญชี Google Cloud Platform ที่เปิดใช้การเรียกเก็บเงิน (ดูขั้นตอนถัดไป)
โครงการใน Cloud Console ที่เปิดใช้ Maps SDK สําหรับ iOS (ดูขั้นตอนถัดไป)

2. ตั้งค่า

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

ตั้งค่า Google Maps Platform

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

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

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

คู่มือเริ่มใช้งานฉบับย่อ

โค้ดเริ่มต้นเพื่อช่วยให้คุณเริ่มต้นทําสิ่งต่อไปนี้ได้พร้อมด้วย Codelab เพื่อช่วยให้คุณเริ่มต้นใช้งานได้เร็วที่สุด

โคลนที่เก็บหากคุณติดตั้ง git

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

หรือคลิกให้รหัสฉันเพื่อดาวน์โหลดซอร์สโค้ด

หลังจากดาวน์โหลดโค้ดแล้ว ให้เปิดโปรเจ็กต์ 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

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

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

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

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

อ่านเวอร์ชันของ Maps SDK สําหรับ iOS เพื่อดูข้อมูลเกี่ยวกับ SDK เวอร์ชันล่าสุดและคําแนะนําสําหรับการบํารุงรักษา

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

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

ติดตั้ง Maps SDK สําหรับ iOS และ Maps SDK สําหรับพ็อดไลบรารียูทิลิตีของ iOS

หากต้องการติดตั้งทรัพยากร Dependency ให้เรียกใช้ pod install ในไดเรกทอรี /starter จากบรรทัดคําสั่ง Cocoapods ดาวน์โหลดทรัพยากร Dependency โดยอัตโนมัติและสร้าง StarterApp.xcworkspace

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

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

import GoogleMaps

ส่งคีย์ API ไปยัง iOS SDK โดยเรียก provideAPIKey บน GMSServices ใน application: didFinishLaunchingWithOptions:

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

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

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

แทนที่ YOUR_API_KEY ด้วยคีย์ API ที่คุณสร้างใน Cloud Console

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

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

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

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

เปิด ViewController.swift

นี่คือที่ที่คุณจะดําเนินการส่วนที่เหลือสําหรับ Codelab นี้ สังเกตว่าเหตุการณ์ในวงจรของ loadView และ viewDidLoad สําหรับตัวควบคุมการดูถูกเชิญมาอยู่แล้ว

นําเข้า Maps SDK สําหรับ iOS โดยการเพิ่มข้อมูลนี้ไว้ที่ด้านบนของไฟล์

import GoogleMaps

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

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

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

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

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

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

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

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate

จากนั้นให้เพิ่มฟังก์ชันนี้ในฟังก์ชัน loadView เพื่อตั้งค่า GMSMapViewDelegate เป็น ViewController

    mapView.delegate = self

โหลดแอปนี้ซ้ําในเครื่องจําลอง iOS (Command+R) แล้วแผนที่ควรปรากฏดังที่แสดงในรูปที่ 1!

แอป iOS ที่แสดง Google Maps

รูปที่ 1 แอป iOS ที่แสดง Google Maps

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

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

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. จัดรูปแบบแผนที่ (ไม่บังคับ)

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

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

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

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

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

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

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

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

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

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

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

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

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

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

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

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

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

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

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

    let marker = GMSMarker(position: mapCenter)

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

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

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

    marker.icon = UIImage(named: "custom_pin.png")

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

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

    marker.map = mapView

โหลดแอปอีกครั้ง แล้วขยายแผนที่แรกด้วยเครื่องหมายดังที่แสดงในรูปที่ 3

แอป iOS ที่มี Google Maps ซึ่งมีเครื่องหมายสีแดงอยู่ตรงกลาง

รูปที่ 3 แอป iOS ที่มี Google Maps ซึ่งมีเครื่องหมายสีแดงอยู่ตรงกลาง

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

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

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

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

เครื่องหมาย 2 อันอยู่ใกล้กันมาก

รูปที่ 4 เครื่องหมาย 2 อันอยู่ใกล้กันมาก

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

ตัวอย่างเครื่องหมายที่รวมกันเป็นไอคอนเดียว

รูปที่ 5 ตัวอย่างเครื่องหมายที่รวมกันเป็นไอคอนเดียว

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

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

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

หากต้องการเพิ่มจํานวนเครื่องหมายบนแผนที่ของคุณ ให้เรียก MarkerGenerator(near:count:).markerArray ในวงจรดูตัวควบคุม viewDidLoad จากด้านล่างของรหัสจากขั้นตอนก่อนหน้า วิธีนี้สร้างจํานวนเครื่องหมายที่ระบุใน count ที่ตําแหน่งแบบสุ่มรอบๆ พิกัดที่ระบุในออบเจ็กต์ CLLocationCoordinate2D ในกรณีนี้ ให้ส่งตัวแปร mapCenter ที่สร้างไว้ก่อนหน้านี้ เครื่องหมายจะแสดงผลใน [GMSMarker]

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

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

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

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

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

import GoogleMapsUtils

กําหนดค่าตัวทําเครื่องหมายเครื่องหมาย

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

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

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

เพิ่มเครื่องหมายและเรียกใช้ตัวทําเครื่องหมายเครื่องหมาย

เมื่อกําหนดค่าอินสแตนซ์ของตัวทําเครื่องหมายเครื่องหมายแล้ว ให้ส่งอาร์เรย์ของตัวทําเครื่องหมายเครื่องหมายคลัสเตอร์เพื่อจัดกลุ่มโดยเรียก add(items:) จากนั้นเรียกใช้คลัสเตอร์เจอร์โดยเรียกใช้ cluster

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

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

แอป iOS ที่มี Google Maps และเครื่องหมายคลัสเตอร์

รูปที่ 6 แอป iOS ที่มี Google Maps และเครื่องหมายคลัสเตอร์

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

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

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

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

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

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

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

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

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

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

หากต้องการใช้ Listener เหตุการณ์ ให้เริ่มต้นด้วยการขัดเกลาที่ท้าย ViewController.swift ก่อนวงเล็บปีกกาปิด

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

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

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

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

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

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

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

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

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

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

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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

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

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

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

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

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

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

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

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

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

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

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

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

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

    circle?.map = mapView

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

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

    // Clear previous circles
    circle?.map = nil

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

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

รูปที่ 7 วงกลมที่วาดรอบเครื่องหมายที่แตะแล้ว

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

เมธอด mapView(_:didTap:) ควรมีลักษณะดังนี้

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. ยินดีด้วย

คุณได้สร้างแอป iOS ที่มีแผนที่ Google แบบอินเทอร์แอกทีฟเรียบร้อยแล้ว

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

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

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

สํารวจหรือแยกที่เก็บข้อมูล GitHub ของตัวอย่างและการสาธิตของ maps-sdk-for-ios-samples เพื่อเป็นแรงบันดาลใจเพิ่มเติม
เรียนรู้จาก Moreifif Codelabs สําหรับการสร้างแอป iOS ด้วย Google Maps Platform
ช่วยเราสร้างเนื้อหาที่คุณคิดว่าเป็นประโยชน์ที่สุดโดยตอบคําถามต่อไปนี้

คุณต้องการเห็น Codelab อื่นใดบ้าง

การแสดงภาพข้อมูลบนแผนที่

ข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งรูปแบบของแผนที่

การสร้างการโต้ตอบแบบ 3 มิติในแผนที่

Codelab ที่คุณต้องการไม่อยู่ในรายการข้างต้นใช่ไหม ส่งคําขอเกี่ยวกับปัญหาใหม่ที่นี่