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

บทแนะนํานี้จะแสดงวิธีเพิ่ม Google Maps ลงในแอป iOS โดยแผนที่จะมีเครื่องหมายหรือเรียกอีกอย่างว่าหมุดเพื่อแสดงตําแหน่งที่เจาะจง

การรับรหัส

โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Google Maps สําหรับ iOS จาก GitHub

/*
 * 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
  }
}

/*
* 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

ตั้งค่าโปรเจ็กต์การพัฒนา

ทําตามขั้นตอนต่อไปนี้เพื่อติดตั้ง Maps SDK สําหรับ iOS

1. ดาวน์โหลดและติดตั้ง Xcode เวอร์ชัน 13.0 ขึ้นไป
2. หากยังไม่มี CocoaPods ให้ติดตั้งใน macOS โดยใช้คําสั่งต่อไปนี้จากเทอร์มินัล

   sudo gem install cocoapods

3. โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Google Maps สําหรับ iOS
4. ไปที่ไดเรกทอรี tutorials/map-with-marker
5. เรียกใช้คําสั่ง pod install การดําเนินการนี้จะติดตั้ง API ที่ระบุใน Podfile รวมถึงทรัพยากร Dependency ที่อาจมี
6. เรียกใช้ pod outdated เพื่อเปรียบเทียบเวอร์ชันพ็อดที่ติดตั้งกับการอัปเดตใหม่ หากตรวจพบเวอร์ชันใหม่ ให้เรียกใช้ pod update เพื่ออัปเดต Podfile และติดตั้ง SDK เวอร์ชันล่าสุด ดูรายละเอียดเพิ่มเติมได้ที่คู่มือ CocoaPods
7. เปิดไฟล์ map-with-Mark.xcworkspace ของโปรเจ็กต์ (ดับเบิลคลิก) เพื่อเปิดใน Xcode คุณต้องใช้ไฟล์ .xcworkspace เพื่อเปิดโปรเจ็กต์

รับคีย์ API และเปิดใช้ API ที่จําเป็น

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

โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อรับคีย์ API

เพิ่มคีย์ API ไปยังแอปพลิเคชัน

เพิ่มคีย์ API ใน AppDelegate.swift ดังนี้

1. โปรดทราบว่ามีการเพิ่มข้อความนําเข้าต่อไปนี้ลงในไฟล์แล้ว

   import GoogleMaps

2. แก้ไขบรรทัดต่อไปนี้ในเมธอด application(_:didFinishLaunchingWithOptions:) โดยแทนที่ YOUR_API_KEY ด้วยคีย์ API

   GMSServices.provideAPIKey("YOUR_API_KEY")

การสร้างและเรียกใช้แอป

1. เชื่อมต่ออุปกรณ์ iOS กับคอมพิวเตอร์ หรือเลือกเครื่องจําลองจากเมนูป๊อปอัปรูปแบบ Xcode
2. หากใช้อุปกรณ์ ให้ตรวจสอบว่าบริการตําแหน่งเปิดอยู่ หากคุณใช้เครื่องจําลอง ให้เลือกตําแหน่งจากเมนูฟีเจอร์
3. ใน Xcode ให้คลิกตัวเลือกเมนู Product/Run (หรือไอคอนปุ่มเล่น)
• Xcode จะสร้างแอป จากนั้นเรียกใช้แอปในอุปกรณ์หรือเครื่องจําลอง
• คุณควรเห็นแผนที่ที่มีเครื่องหมายซึ่งมีจุดศูนย์กลางอยู่ที่ซิดนีย์บนชายฝั่งตะวันออกของออสเตรเลีย ซึ่งคล้ายกับภาพในหน้านี้

การแก้ปัญหา:

• หากไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณได้รับคีย์ API และเพิ่มในแอปแล้ว ตามที่อธิบายไว้ข้างต้น โปรดตรวจสอบข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API ในคอนโซลการแก้ไขข้อบกพร่องของ Xcode
• หากคุณจํากัดคีย์ API ตามตัวระบุกลุ่ม iOS ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุกลุ่มสําหรับแอป ดังนี้ com.google.examples.map-with-marker
• ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
• ใช้เครื่องมือแก้ไขข้อบกพร่อง Xcode เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป

การทําความเข้าใจโค้ด

1. สร้างแผนที่และตั้งค่าเป็นมุมมองใน loadView()

   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;
         

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

   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 พร้อมด้วยเครื่องหมายเพื่อระบุตําแหน่งเฉพาะ คุณยังเรียนรู้วิธีใช้ Maps SDK สําหรับ iOS ได้ด้วย

ขั้นตอนถัดไป

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