เพิ่มแผนที่ด้วยเครื่องหมาย
บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google แบบง่ายๆ ด้วยเครื่องหมายลงในแอป iOS ของคุณ ซึ่งเหมาะกับผู้ที่มีความรู้ระดับเริ่มต้นหรือระดับกลางเกี่ยวกับ Swift หรือ Objective-C ตลอดจนความรู้ทั่วไปของ Xcode สำหรับคู่มือขั้นสูงในการสร้างแผนที่ โปรดอ่านคู่มือนักพัฒนาซอฟต์แวร์
คุณจะสร้างแผนที่ต่อไปนี้โดยใช้บทแนะนำนี้ เครื่องหมายถูกวางอยู่ที่ ซิดนีย์ ออสเตรเลีย
รับโค้ด
โคลนหรือดาวน์โหลด ที่เก็บตัวอย่างสำหรับ iOS ของ Google Maps บน GitHub
หรือให้คลิกปุ่มต่อไปนี้เพื่อดาวน์โหลดซอร์สโค้ด
Swift
/* * Copyright 2020 Google Inc. All rights reserved. * * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language governing * permissions and limitations under the License. */ import UIKit import GoogleMaps class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. // Create a GMSCameraPosition that tells the map to display the // coordinate -33.86,151.20 at zoom level 6. let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0) let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera) self.view.addSubview(mapView) // Creates a marker in the center of the map. let marker = GMSMarker() marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20) marker.title = "Sydney" marker.snippet = "Australia" marker.map = mapView } }
Objective-C
/* * Copyright 2020 Google Inc. All rights reserved. * * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language governing * permissions and limitations under the License. */ #import "ViewController.h" #import <GoogleMaps/GoogleMaps.h> @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // Create a GMSCameraPosition that tells the map to display the // coordinate -33.86,151.20 at zoom level 6. GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:6]; GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera]; mapView.myLocationEnabled = YES; [self.view addSubview:mapView]; // Creates a marker in the center of the map. GMSMarker *marker = [[GMSMarker alloc] init]; marker.position = CLLocationCoordinate2DMake(-33.86, 151.20); marker.title = @"Sydney"; marker.snippet = @"Australia"; marker.map = mapView; } @end
เริ่มต้นใช้งาน
เครื่องมือจัดการแพ็กเกจ Swift
Maps SDK สำหรับ iOS สามารถติดตั้งได้โดยใช้ Swift Package Manager
- ตรวจสอบว่าคุณได้นำ Maps SDK สำหรับทรัพยากร Dependency ของ iOS ที่มีอยู่ออก
- เปิดหน้าต่างเทอร์มินัลและไปยังไดเรกทอรี
tutorials/map-with-marker
-
ตรวจสอบว่าพื้นที่ทำงาน Xcode ปิดอยู่และเรียกใช้คำสั่งต่อไปนี้
sudo gem install cocoapods-deintegrate cocoapods-clean pod deintegrate pod cache clean --all rm Podfile rm map-with-marker.xcworkspace
- เปิดโปรเจ็กต์ Xcode แล้วลบ Podfile
- ไปที่ไฟล์ > เพิ่มทรัพยากร Dependency ของแพ็กเกจ
- ป้อน https://github.com/googlemaps/ios-maps-sdk เป็น URL กด Enter เพื่อดึงแพ็กเกจ แล้วคลิกเพิ่มแพ็กเกจ
- คุณอาจต้องรีเซ็ตแคชแพ็กเกจโดยใช้ไฟล์ > แพ็กเกจ > รีเซ็ตแคชแพ็กเกจ
ใช้ CocoaPods
- ดาวน์โหลดและติดตั้ง Xcode เวอร์ชัน 15.0 ขึ้นไป
- หากยังไม่มี CocoaPods ให้ติดตั้งใน macOS โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล
sudo gem install cocoapods
- ไปที่ไดเรกทอรี
tutorials/map-with-marker
- เรียกใช้คำสั่ง
pod install
การดำเนินการนี้จะติดตั้ง Maps SDK ที่ระบุไว้ในPodfile
พร้อมกับทรัพยากร Dependency ทั้งหมด - เรียกใช้
pod outdated
เพื่อเปรียบเทียบเวอร์ชันพ็อดที่ติดตั้งกับการอัปเดตใหม่ หากตรวจพบเวอร์ชันใหม่ ให้เรียกใช้pod update
เพื่ออัปเดตPodfile
และติดตั้ง SDK เวอร์ชันล่าสุด โปรดดูรายละเอียดเพิ่มเติมในคู่มือ CocoaPods - เปิด (ดับเบิลคลิก) ไฟล์ map-with-marker.xcworkspace ของโปรเจ็กต์เพื่อเปิดใน Xcode คุณต้องใช้ไฟล์
.xcworkspace
เพื่อเปิดโปรเจ็กต์
รับคีย์ API และเปิดใช้ API ที่จำเป็น
หากต้องการจบบทแนะนำนี้ คุณต้องมีคีย์ Google API ที่ได้รับอนุญาตให้ใช้ Maps SDK สำหรับ iOS คลิกปุ่มต่อไปนี้เพื่อรับคีย์และเปิดใช้งาน API
เริ่มต้นใช้งานโปรดดูรายละเอียดเพิ่มเติมที่หัวข้อรับคีย์ API
เพิ่มคีย์ API ลงในแอปพลิเคชัน
เพิ่มคีย์ API ลงใน AppDelegate.swift
ดังนี้
- โปรดทราบว่ามีการเพิ่มข้อความนำเข้าต่อไปนี้ลงในไฟล์แล้ว:
import GoogleMaps
- แก้ไขบรรทัดต่อไปนี้ในเมธอด
application(_:didFinishLaunchingWithOptions:)
โดยแทนที่ YOUR_API_KEY ด้วยคีย์ API ของคุณGMSServices.provideAPIKey("YOUR_API_KEY")
สร้างและเรียกใช้แอป
- เชื่อมต่ออุปกรณ์ iOS กับคอมพิวเตอร์ หรือเลือก เครื่องจำลอง จากเมนู Xcode Scheme
- หากคุณใช้อุปกรณ์ ให้ตรวจสอบว่าได้เปิดใช้บริการตำแหน่งแล้ว หากใช้เครื่องจำลอง ให้เลือกตำแหน่งจากเมนูฟีเจอร์
- ใน Xcode ให้คลิกตัวเลือกเมนู Product/Run (หรือไอคอนปุ่มเล่น)
- Xcode จะสร้างแอป จากนั้นเรียกใช้แอปในอุปกรณ์หรือเครื่องจำลอง
- คุณควรจะเห็นแผนที่ที่มีเครื่องหมายศูนย์กลางอยู่ที่ซิดนีย์บนชายฝั่งตะวันออกของออสเตรเลีย คล้ายกับภาพในหน้านี้
การแก้ปัญหา:
- หากไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณได้รับคีย์ API และเพิ่มลงในแอปตามที่อธิบายไว้ก่อนหน้านี้แล้ว ตรวจสอบ คอนโซลการแก้ไขข้อบกพร่องของ Xcode เพื่อหาข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API
- หากคุณจำกัดคีย์ API ตามตัวระบุชุด iOS ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุชุดสำหรับแอป:
com.google.examples.map-with-marker
- ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
- ใช้เครื่องมือแก้ไขข้อบกพร่อง Xcode เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป
ทำความเข้าใจโค้ด
- สร้างแผนที่และตั้งเป็นมุมมองใน
viewDidLoad()
Swift
// Create a GMSCameraPosition that tells the map to display the // coordinate -33.86,151.20 at zoom level 6. let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0) let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera) view = mapView
Objective-C
// Create a GMSCameraPosition that tells the map to display the // coordinate -33.86,151.20 at zoom level 6. GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:6.0]; GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera]; self.view = mapView;
- เพิ่มเครื่องหมายบนแผนที่ใน
viewDidLoad()
Swift
// Creates a marker in the center of the map. let marker = GMSMarker() marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20) marker.title = "Sydney" marker.snippet = "Australia" marker.map = mapView
Objective-C
// Creates a marker in the center of the map. GMSMarker *marker = [[GMSMarker alloc] init]; marker.position = CLLocationCoordinate2DMake(-33.86, 151.20); marker.title = @"Sydney"; marker.snippet = @"Australia"; marker.map = mapView;
โดยค่าเริ่มต้น Maps SDK สำหรับ iOS จะแสดงเนื้อหาของหน้าต่างข้อมูลเมื่อผู้ใช้แตะเครื่องหมาย คุณไม่จำเป็นต้องเพิ่ม Listener การคลิกสำหรับเครื่องหมาย หากคุณยินดีที่จะใช้การทำงานเริ่มต้น
ยินดีด้วย คุณได้สร้างแอป iOS ที่แสดงแผนที่ Google โดยมีเครื่องหมายระบุตำแหน่งที่เจาะจง คุณได้เรียนรู้วิธีใช้ Maps SDK สำหรับ iOS แล้ว
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์แผนที่และสิ่งที่ทําได้ด้วยเครื่องหมาย