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

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

กําลังรับโค้ด

โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Google Maps บน iOS จาก 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

การตั้งค่าโครงการพัฒนา

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

1. ดาวน์โหลดและติดตั้ง Xcode เวอร์ชัน 14.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-marker.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")

หมายเหตุ: ตัวอย่างโค้ดสําหรับบทแนะนําที่เสร็จสมบูรณ์ได้รับการกําหนดค่าให้ทํางานเป็นโปรเจ็กต์ Swift Xcode แต่มีตัวอย่าง Swift และ Objective-C

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

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 SDK สําหรับ iOS ได้ด้วย

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

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