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

บทแนะนำนี้จะแสดงวิธีเพิ่ม Google Maps อย่างง่ายด้วยเครื่องหมายลงในแอป iOS ของคุณ เหมาะสำหรับผู้ที่มีความรู้ระดับเริ่มต้นหรือระดับกลางเกี่ยวกับ Swift หรือ Objective-C และมีความรู้ทั่วไปเกี่ยวกับ Xcode สำหรับคำแนะนำขั้นสูงในการสร้างแผนที่ ให้อ่านคู่มือนักพัฒนาซอฟต์แวร์

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

รับโค้ด

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

      

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

ผู้จัดการแพ็กเกจของ Swift

Maps SDK สำหรับ iOS ติดตั้งได้โดยใช้ Swift Package Manager

1. ตรวจสอบว่าคุณได้นำ Maps SDK สำหรับทรัพยากร Dependency ของ iOS ที่มีอยู่ทั้งหมดออกแล้ว
2. เปิดหน้าต่างเทอร์มินัลและไปที่ไดเรกทอรี tutorials/mapwithmarker
3. ตรวจสอบว่าพื้นที่ทำงาน Xcode ปิดอยู่และเรียกใช้คำสั่งต่อไปนี้

   sudo gem install cocoapods-deintegrate cocoapods-clean
   pod deintegrate
   pod cache clean --all
   rm Podfile
   rm map-with-marker.xcworkspace

4. เปิดโปรเจ็กต์ Xcode และลบ podfile
5. ไปที่ไฟล์ > เพิ่มทรัพยากร Dependency ของแพ็กเกจ
6. ป้อน https://github.com/googlemaps/ios-maps-sdk เป็น URL กด Enter เพื่อดึงแพ็กเกจ แล้วคลิกเพิ่มแพ็กเกจ
7. คุณอาจจำเป็นต้องรีเซ็ตแคชของแพ็กเกจโดยใช้ไฟล์ > แพ็กเกจ > รีเซ็ตแคชของแพ็กเกจ

ใช้ CocoaPods

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

   sudo gem install cocoapods

3. ไปที่ไดเรกทอรี tutorials/map-with-marker
4. เรียกใช้คำสั่ง pod install การดำเนินการนี้จะติดตั้ง Maps SDK ที่ระบุใน Podfile พร้อมกับทรัพยากร Dependency
5. เรียกใช้ pod outdated เพื่อเปรียบเทียบเวอร์ชันพ็อดที่ติดตั้งกับการอัปเดตใหม่ หากตรวจพบเวอร์ชันใหม่ ให้เรียกใช้ pod update เพื่ออัปเดต Podfile และติดตั้ง SDK เวอร์ชันล่าสุด ดูรายละเอียดเพิ่มเติมได้ที่คู่มือ CocoaPods
6. เปิด (ดับเบิลคลิก) ไฟล์ 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 และเพิ่มไว้ในแอปแล้วตามที่อธิบายไว้ก่อนหน้านี้ ตรวจสอบคอนโซลดีบักของ Xcode เพื่อดูข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API
• หากคุณจำกัดคีย์ API ด้วยตัวระบุชุด iOS ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุชุดของแอปดังนี้ com.google.examples.map-with-marker
• ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
• ใช้เครื่องมือแก้ไขข้อบกพร่อง Xcode เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป

ทำความเข้าใจโค้ด

1. สร้างแผนที่และตั้งเป็นมุมมองใน 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;
         

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

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

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