আপনার iOS অ্যাপে একটি মানচিত্র যোগ করুন (সুইফট)

1. আপনি শুরু করার আগে

এই কোডল্যাব আপনাকে শেখায় কিভাবে সুইফটে iOS অ্যাপ তৈরির জন্য Google Maps প্ল্যাটফর্ম ব্যবহার করা শুরু করবেন। আপনি একটি iOS অ্যাপ তৈরি করবেন যা নিম্নলিখিতগুলি করে:

  • iOS এর জন্য Maps SDK এবং iOS ইউটিলিটি লাইব্রেরির জন্য Maps SDK লোড করে।
  • সিডনি, অস্ট্রেলিয়াকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করে।
  • সিডনির আশেপাশে 100 পয়েন্টের জন্য কাস্টম মার্কার প্রদর্শন করে।
  • মার্কার ক্লাস্টারিং প্রয়োগ করে।
  • ব্যবহারকারীর ইন্টারঅ্যাকশন সক্ষম করে যা পুনরায় কেন্দ্রীভূত করে এবং যখন একটি মার্কার ট্যাপ করা হয় তখন মানচিত্রে একটি বৃত্ত আঁকে।

একটি iOS অ্যাপে মার্কার সহ মানচিত্র

পূর্বশর্ত

  • সুইফট এবং আইওএস ডেভেলপমেন্টের প্রাথমিক জ্ঞান।

আপনি কি শিখবেন

  • iOS এর জন্য Maps SDK এবং iOS ইউটিলিটি লাইব্রেরির জন্য Google মানচিত্র SDK লোড করা হচ্ছে।
  • একটি মানচিত্র লোড হচ্ছে।
  • মার্কার, কাস্টম মার্কার এবং মার্কার ক্লাস্টারিং ব্যবহার করা।
  • ব্যবহারকারীর মিথস্ক্রিয়া প্রদান করতে iOS ইভেন্ট সিস্টেমের জন্য মানচিত্র SDK-এর সাথে কাজ করা।
  • ম্যাপ ক্যামেরা প্রোগ্রামিকভাবে নিয়ন্ত্রণ করা।
  • মানচিত্রে অঙ্কন।

আপনি কি প্রয়োজন হবে

এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন:

  • Xcode 12.0 বা উচ্চতর 12.0 বা তার পরবর্তী টার্গেট SDK সহ।
  • কোকোপড ইনস্টল করা হয়েছে।
  • বিলিং সক্ষম সহ একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট (পরবর্তী ধাপ দেখুন)।
  • ক্লাউড কনসোলে একটি প্রকল্প iOS এর জন্য মানচিত্র SDK সক্ষম (পরবর্তী ধাপ দেখুন)।

2. সেট আপ করুন

নীচের সক্রিয়করণ পদক্ষেপের জন্য, আপনাকে iOS এর জন্য মানচিত্র SDK সক্ষম করতে হবে।

Google Maps প্ল্যাটফর্ম সেট আপ করুন

আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷

  1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।

  1. Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
  2. ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷

দ্রুত শুরু

যত তাড়াতাড়ি সম্ভব আপনাকে শুরু করতে, এই কোডল্যাবের সাথে আপনাকে অনুসরণ করতে সহায়তা করার জন্য এখানে কিছু স্টার্টার কোড রয়েছে৷

  1. আপনি যদি git ইনস্টল করে থাকেন তবে সংগ্রহস্থল ক্লোন করুন।
git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

বিকল্পভাবে, উৎস কোড ডাউনলোড করতে আমাকে কোড দিন ক্লিক করুন।

  1. কোডটি ডাউনলোড করার পরে, /starter ডিরেক্টরিতে StarterApp প্রকল্পটি খুলুন। কোডল্যাবটি সম্পূর্ণ করার জন্য আপনার প্রয়োজনীয় মৌলিক ফাইল কাঠামোটি এই প্রকল্পে অন্তর্ভুক্ত। আপনার যা কিছুর সাথে কাজ করতে হবে তা /starter/StarterApp ডিরেক্টরিতে অবস্থিত।

সম্পূর্ণ সমাধান কোড চলমান দেখতে, /solution/SolutionApp ডিরেক্টরিতে সম্পূর্ণ কোডটি দেখুন।

3. iOS এর জন্য Maps SDK ইনস্টল করুন৷

iOS এর জন্য Maps SDK ব্যবহার করার প্রথম ধাপ হল প্রয়োজনীয় নির্ভরতা ইনস্টল করা। এই প্রক্রিয়ার দুটি ধাপ রয়েছে: Cocoapods নির্ভরতা পরিচালক থেকে iOS এর জন্য Maps SDK এবং iOS ইউটিলিটি লাইব্রেরির জন্য Maps SDK ইনস্টল করা এবং SDK-কে আপনার API কী প্রদান করা।

  1. Podfile এ iOS এর জন্য Maps SDK এবং iOS ইউটিলিটি লাইব্রেরির জন্য Maps SDK যোগ করুন।

এই কোডল্যাব, iOS এর জন্য Maps SDK উভয়ই ব্যবহার করে, যা Google Maps-এর সমস্ত মূল কার্যকারিতা প্রদান করে এবং Maps iOS ইউটিলিটি লাইব্রেরি, যা মার্কার ক্লাস্টারিং সহ আপনার মানচিত্রকে সমৃদ্ধ করতে বিভিন্ন ধরনের উপযোগিতা প্রদান করে।

শুরু করতে, Xcode এ (বা আপনার পছন্দের টেক্সট এডিটর) Podfile খুলুন এবং IOS এর জন্য Maps SDK এবং Utility Library নির্ভরতা # Pods for StarterApp মন্তব্যের অধীনে অন্তর্ভুক্ত করতে ফাইলটি আপডেট করুন।

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

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
  1. iOS এর জন্য Maps SDK এবং iOS ইউটিলিটি লাইব্রেরি পডের জন্য Maps SDK ইনস্টল করুন।

নির্ভরতা ইনস্টল করতে, কমান্ড লাইন থেকে /starter ডিরেক্টরিতে pod install চালান। Cocoapods স্বয়ংক্রিয়ভাবে নির্ভরতা ডাউনলোড করে এবং StarterApp.xcworkspace তৈরি করে।

  1. আপনার নির্ভরতা ইনস্টল হয়ে গেলে, Xcode-এ ফাইলটি খুলতে /starter ডিরেক্টরি থেকে open StarterApp.xcworkspace খুলুন এবং তারপর Command+R টিপে আইফোন সিমুলেটরে অ্যাপটি চালান। সবকিছু সঠিকভাবে সেট আপ করা হলে, সিমুলেটর চালু হবে এবং একটি কালো পর্দা দেখাবে। চিন্তা করবেন না, আপনি এখনও কিছু তৈরি করেননি, তাই এটি প্রত্যাশিত!
  2. AppDelegate.swift এ SDK আমদানি করুন।

এখন আপনার নির্ভরতা ইনস্টল করা হয়েছে, এটি আপনার API কী SDK-তে প্রদান করার সময়। প্রথম ধাপ হল IOS-এর জন্য Maps SDK-কে একটি নির্ভরতা হিসাবে import UIKit আমদানি বিবৃতির নীচে নিম্নলিখিতগুলি রেখে:

import GoogleMaps
  1. অ্যাপ্লিকেশনে provideAPIKeyGMSServices কল করে iOS SDK-এ আপনার API কী পাস করুন 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
  }

}

ক্লাউড কনসোলে আপনার তৈরি করা API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করুন।

এখন আপনার নির্ভরতা ইনস্টল করা হয়েছে এবং আপনার API কী প্রদান করা হয়েছে, আপনি iOS এর জন্য মানচিত্র SDK-এ কল করা শুরু করতে প্রস্তুত৷

4. একটি মানচিত্র প্রদর্শন করুন

আপনার প্রথম মানচিত্র প্রদর্শন করার সময়!

iOS-এর জন্য Maps SDK-এর সবচেয়ে বেশি ব্যবহৃত অংশ হল GMSMapView ক্লাস, যা অনেকগুলি পদ্ধতি প্রদান করে যা আপনাকে মানচিত্রের দৃষ্টান্তগুলি তৈরি এবং ম্যানিপুলেট করার অনুমতি দেয়৷ এখানে যে কিভাবে করা হয়.

  1. ViewController.swift খুলুন।

এই কোডল্যাবের জন্য আপনি বাকি কাজটি এখানেই করবেন। লক্ষ্য করুন loadView এবং viewDidLoad লাইফসাইকেল ইভেন্টগুলি ভিউ কন্ট্রোলারের জন্য ইতিমধ্যেই আপনার জন্য স্টাব আউট করা হয়েছে৷

  1. ফাইলের শীর্ষে এটি যোগ করে iOS এর জন্য মানচিত্র SDK আমদানি করুন:
import GoogleMaps
  1. GMSMapView ViewController ভেরিয়েবল ঘোষণা করুন।

GMSMapView এর উদাহরণ হল এই কোডল্যাব জুড়ে আপনি যে প্রধান বস্তুর সাথে কাজ করেন, এবং আপনি বিভিন্ন ভিউ কন্ট্রোলার লাইফসাইকেল পদ্ধতি থেকে এটিকে উল্লেখ করবেন এবং কাজ করবেন। এটি উপলব্ধ করতে, এটি সংরক্ষণ করার জন্য একটি উদাহরণ ভেরিয়েবল ঘোষণা করতে ViewController এর বাস্তবায়ন আপডেট করুন:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}
  1. loadView , GMSCameraPosition এর একটি উদাহরণ তৈরি করুন।

GMSCameraPosition সংজ্ঞায়িত করে যেখানে মানচিত্রটি কেন্দ্রীভূত হয় এবং জুম স্তরটি প্রদর্শিত হয়। এই কোডটি 12-এর জুম স্তর সহ, -33.86 অক্ষাংশ এবং 151.20 দ্রাঘিমাংশে অস্ট্রেলিয়ার সিডনিতে মানচিত্রটিকে কেন্দ্রীভূত করতে ক্যামেরার সাথে cameraWithLatitude:longitude:zoom: পদ্ধতিটিকে কল করে:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)
  1. loadView -এ, মানচিত্রটি ইনস্ট্যান্টিয়েট করতে GMSMapView এর একটি উদাহরণ তৈরি করুন।

একটি নতুন মানচিত্রের উদাহরণ তৈরি করতে, GMSMapView(frame: CGRect, camera: GMSCameraPosition) । লক্ষ্য করুন কিভাবে ফ্রেমটি CGRect.zero এ সেট করা হয়েছে, যা iOS CGGeometry লাইব্রেরির একটি গ্লোবাল ভেরিয়েবল যা ভিউ কন্ট্রোলারের ভিতরে অবস্থান (0,0) এ অবস্থিত 0 প্রস্থ, 0 উচ্চতার একটি ফ্রেম নির্দিষ্ট করে। ক্যামেরা আপনার তৈরি করা ক্যামেরা অবস্থানে সেট করা আছে।

এরপরে, মানচিত্র প্রদর্শন করতে, ভিউ কন্ট্রোলারের রুট mapView এ সেট করুন, যা মানচিত্রটিকে পূর্ণস্ক্রীন প্রদর্শন করে।

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  1. ভিউ কন্ট্রোলারে GMSMapViewDelegate সেট করুন।

বাস্তবায়িত হলে, ম্যাপ ভিউ প্রতিনিধি আপনাকে GMSMapView উদাহরণে ব্যবহারকারীর মিথস্ক্রিয়া থেকে ইভেন্টগুলি পরিচালনা করতে দেয়, যা আপনার পরে প্রয়োজন হবে।

প্রথমে, GMSMapViewDelegate এর প্রোটোকলের সাথে সামঞ্জস্য করতে ViewController ইন্টারফেস আপডেট করুন GMSMapViewDelegate:

class ViewController: UIViewController, GMSMapViewDelegate

এরপর, ViewControllerGMSMapViewDelegate সেট করতে loadView ফাংশনে এটি যোগ করুন।

    mapView.delegate = self

এখন আইওএস সিমুলেটরে অ্যাপটি পুনরায় লোড করুন ( Command+R ), এবং মানচিত্রটি চিত্র 1 এ দেখানো উচিত!

একটি গুগল ম্যাপ দেখাচ্ছে iOS অ্যাপ

চিত্র 1. একটি Google মানচিত্র দেখাচ্ছে iOS অ্যাপ।

রিক্যাপ করার জন্য, এই ধাপে আপনি অস্ট্রেলিয়ার সিডনি শহরকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করতে 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. মানচিত্র স্টাইল করুন (ঐচ্ছিক)

আপনি ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে আপনার মানচিত্রের শৈলী কাস্টমাইজ করতে পারেন।

একটি মানচিত্র আইডি তৈরি করুন

আপনি যদি এটির সাথে সম্পর্কিত একটি মানচিত্র শৈলী সহ একটি মানচিত্র আইডি তৈরি না করে থাকেন তবে নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করতে মানচিত্র আইডি নির্দেশিকা দেখুন:

  1. একটি মানচিত্র আইডি তৈরি করুন।
  2. একটি মানচিত্র শৈলীতে একটি মানচিত্র ID সংযুক্ত করুন৷

আপনার অ্যাপে ম্যাপ আইডি যোগ করুন

আগের ধাপে আপনার তৈরি করা মানচিত্র আইডি ব্যবহার করতে, ViewController.swift ফাইলটি খুলুন এবং loadView পদ্ধতির মধ্যে একটি GMSMapID অবজেক্ট তৈরি করুন এবং এটিকে মানচিত্র ID প্রদান করুন। এরপরে, একটি প্যারামিটার হিসাবে GMSMapID অবজেক্ট প্রদান করে GMSMapView ইনস্ট্যান্টিয়েশনটি পরিবর্তন করুন।

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. মানচিত্রে চিহ্নিতকারী যোগ করুন

iOS-এর জন্য Maps SDK-এর সাথে ডেভেলপাররা অনেক কিছু করে থাকে, কিন্তু ম্যাপে মার্কার লাগানো অবশ্যই সবচেয়ে জনপ্রিয়। মার্কার ম্যাপে নির্দিষ্ট পয়েন্ট দেখায় এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনার জন্য একটি সাধারণ UI উপাদান। আপনি যদি আগে Google মানচিত্র ব্যবহার করে থাকেন, তাহলে আপনি সম্ভবত ডিফল্ট মার্কারটির সাথে পরিচিত, যা চিত্র 2-এর লাল পিনের মতো দেখায়:

লাল মার্কার সহ মানচিত্র

চিত্র 2. লাল মার্কার সহ মানচিত্র।

এই ধাপটি দেখায় কিভাবে GMSMarker ক্লাস ব্যবহার করে মানচিত্রে মার্কার বসাতে হয়।

মনে রাখবেন যে ভিউ কন্ট্রোলারের loadView লাইফসাইকেল ইভেন্টে আগের ধাপ থেকে মানচিত্র লোড না হওয়া পর্যন্ত মার্কারগুলিকে মানচিত্রে স্থাপন করা যাবে না, তাই viewDidLoad লাইফসাইকেল ইভেন্টে এই ধাপগুলি সম্পূর্ণ করুন, যা ভিউ (এবং মানচিত্র) লোড হওয়ার পরে বলা হয় .

  1. একটি CLLocationCoordinate2D অবজেক্ট সংজ্ঞায়িত করুন।

CLLocationCoordinate2D হল iOS CoreLocation লাইব্রেরি দ্বারা উপলব্ধ একটি কাঠামো, যা একটি সেট অক্ষাংশ এবং দ্রাঘিমাংশে একটি ভৌগলিক অবস্থান সংজ্ঞায়িত করে৷ আপনার প্রথম মার্কার তৈরি করা শুরু করতে, একটি 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)
  1. GMSMarker এর একটি উদাহরণ তৈরি করুন।

iOS এর জন্য Maps SDK GMSMarker ক্লাস প্রদান করে। GMSMarker এর প্রতিটি উদাহরণ মানচিত্রে একটি পৃথক মার্কারকে প্রতিনিধিত্ব করে এবং মার্কার markerWithPosition: এবং এটিকে একটি CLLocationCoordinate2D অবজেক্ট পাস করে SDK কে ম্যাপে মার্কারটি কোথায় রাখতে হবে তা জানাতে।

    let marker = GMSMarker(position: mapCenter)
  1. একটি কাস্টম মার্কার আইকন সেট করুন।

Google মানচিত্রের জন্য ডিফল্ট লাল পিন মার্কারটি দুর্দান্ত, কিন্তু তাই আপনার মানচিত্রটি কাস্টমাইজ করছে! ভাগ্যক্রমে, একটি কাস্টম মার্কার ব্যবহার করা iOS এর জন্য মানচিত্র SDK-এর সাথে খুব সহজ৷ লক্ষ্য করুন যে StarterApp প্রকল্পে আপনার ব্যবহারের জন্য 'custom_pin.png' নামক একটি ছবি রয়েছে, কিন্তু আপনি যে কোনো ছবি ব্যবহার করতে পারেন।

কাস্টম মার্কার সেট করতে, মার্কারটির icon বৈশিষ্ট্যটি UIImage এর একটি উদাহরণে সেট করুন।

    marker.icon = UIImage(named: "custom_pin.png")
  1. ম্যাপে মার্কার রেন্ডার করুন।

আপনার মার্কার তৈরি করা হয়েছে, কিন্তু এটি এখনও মানচিত্রে নেই৷ এটি করার জন্য, GMSMarker দৃষ্টান্তের map বৈশিষ্ট্য GMSMapView এর একটি উদাহরণে সেট করুন।

    marker.map = mapView

এখন অ্যাপটি পুনরায় লোড করুন এবং চিত্র 3-তে দেখানো একটি মার্কার সহ আপনার প্রথম মানচিত্রটি দেখুন!

মাঝখানে একটি লাল মার্কার সহ একটি Google মানচিত্র সমন্বিত iOS অ্যাপ৷

চিত্র 3. কেন্দ্রে একটি লাল মার্কার সহ একটি Google মানচিত্র সমন্বিত iOS অ্যাপ।

রিক্যাপ করার জন্য, এই বিভাগে আপনি GMSMarker ক্লাসের একটি উদাহরণ তৈরি করেছেন এবং মানচিত্রে একটি মার্কার প্রদর্শন করতে মানচিত্র দৃশ্যে এটি প্রয়োগ করেছেন। 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. মার্কার ক্লাস্টারিং সক্ষম করুন

আপনি যদি অনেকগুলি মার্কার ব্যবহার করেন, বা মার্কারগুলি একে অপরের কাছাকাছি থাকে, তাহলে আপনি এমন একটি সমস্যার সম্মুখীন হতে পারেন যেখানে মার্কারগুলি ওভারল্যাপ হয় বা একসাথে ভিড় দেখা যায়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়৷ উদাহরণস্বরূপ, যদি দুটি মার্কার একসাথে খুব কাছাকাছি থাকে, তাহলে আপনি চিত্র 4-এ দেখা একটি পরিস্থিতির সাথে শেষ করতে পারেন:

দুটি মার্কার একসাথে খুব কাছাকাছি

চিত্র 4. দুটি মার্কার একসাথে খুব কাছাকাছি।

এখানেই মার্কার ক্লাস্টারিং আসে৷ মার্কার ক্লাস্টারিং হল আরেকটি সাধারণভাবে প্রয়োগ করা বৈশিষ্ট্য, যা কাছাকাছি চিহ্নিতকারীকে একটি একক আইকনে গোষ্ঠীভুক্ত করে যা জুম স্তরের উপর নির্ভর করে পরিবর্তিত হয়, যেমন চিত্র 5-এ দেখানো হয়েছে:

একটি একক আইকনে ক্লাস্টার করা মার্কারগুলির উদাহরণ৷

চিত্র 5. একটি একক আইকনে ক্লাস্টার করা মার্কারগুলির উদাহরণ৷

মার্কার ক্লাস্টারিংয়ের জন্য অ্যালগরিদম মানচিত্রের দৃশ্যমান এলাকাটিকে একটি গ্রিডে বিভক্ত করে, তারপর একই কক্ষে থাকা আইকনগুলিকে ক্লাস্টার করে। Google Maps প্ল্যাটফর্ম টিম iOS ইউটিলিটি লাইব্রেরির জন্য Google Maps SDK নামে একটি সহায়ক, ওপেন-সোর্স ইউটিলিটি লাইব্রেরি তৈরি করেছে যা অন্যান্য অনেক কিছুর মধ্যে, আপনার জন্য স্বয়ংক্রিয়ভাবে মার্কার ক্লাস্টারিং পরিচালনা করে৷ Google Maps প্ল্যাটফর্ম ডকুমেন্টেশনে মার্কার ক্লাস্টারিং সম্পর্কে আরও পড়ুন, অথবা GitHub- এ iOS ইউটিলিটি লাইব্রেরির জন্য উৎস দেখুন।

  1. মানচিত্রে আরো অনেক মার্কার যোগ করুন।

মার্কার ক্লাস্টারিং কার্যে দেখতে, আপনার মানচিত্রে প্রচুর মার্কার থাকতে হবে। এটি সহজ করার জন্য, MarkerGenerator.swift এ স্টার্টার প্রকল্পে আপনার জন্য একটি সুবিধাজনক মার্কার জেনারেটর সরবরাহ করা হয়েছে।

আপনার মানচিত্রে একটি নির্দিষ্ট সংখ্যক মার্কার যোগ করতে, পূর্ববর্তী ধাপের কোডের নীচে ভিউ কন্ট্রোলারের viewDidLoad লাইফসাইকেলে MarkerGenerator(near:count:).markerArray মার্কার অ্যারেতে কল করুন। পদ্ধতিটি একটি CLLocationCoordinate2D অবজেক্টে নির্দিষ্ট স্থানাঙ্কগুলির চারপাশে এলোমেলো অবস্থানে count নির্দিষ্ট করা মার্কারগুলির সংখ্যা তৈরি করে। এই ক্ষেত্রে, আপনি mapCenter ভেরিয়েবলটি পাস করতে পারেন যা আপনি আগে তৈরি করেছিলেন। মার্কারগুলি একটি [GMSMarker] এ ফেরত দেওয়া হয়।

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

আপনি markerArray এর সংজ্ঞার পরে এই লাইনগুলি যোগ করে এবং তারপর অ্যাপটি চালানোর মাধ্যমে এই অনেকগুলি মার্কার দেখতে কেমন তা পরীক্ষা করতে পারেন৷ পরবর্তী ধাপগুলিতে যাওয়ার আগে এই লাইনগুলি মন্তব্য করতে ভুলবেন না, যা পরিবর্তে মার্কারগুলির প্রদর্শন পরিচালনা করতে মার্কার ক্লাস্টার ব্যবহার করে:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }
  1. iOS ইউটিলিটি লাইব্রেরির জন্য Google মানচিত্র SDK আমদানি করুন।

আপনার প্রকল্পে নির্ভরতা হিসাবে মানচিত্র iOS ইউটিলিটি লাইব্রেরি যোগ করতে, এটিকে ViewController.swift এর শীর্ষে থাকা নির্ভরতার তালিকায় যোগ করুন।

import GoogleMapsUtils
  1. মার্কার ক্লাস্টার কনফিগার করুন।

মার্কার ক্লাস্টার ব্যবহার করার জন্য, এটি কীভাবে কাজ করে তা কনফিগার করার জন্য আপনাকে তিনটি জিনিস প্রদান করতে হবে: একটি ক্লাস্টারিং অ্যালগরিদম, একটি আইকন জেনারেটর এবং একটি রেন্ডারার৷ অ্যালগরিদম কীভাবে মার্কারগুলিকে ক্লাস্টার করা হয় তার আচরণ নির্ধারণ করে, যেমন একই ক্লাস্টারে অন্তর্ভুক্ত করার জন্য মার্কারগুলির মধ্যে দূরত্ব। আইকন জেনারেটর বিভিন্ন জুম স্তরে ব্যবহার করার জন্য ক্লাস্টার আইকন সরবরাহ করে। রেন্ডারার মানচিত্রে ক্লাস্টার আইকনগুলির প্রকৃত রেন্ডারিং পরিচালনা করে৷

আপনি যদি পছন্দ করেন তবে আপনি স্ক্র্যাচ থেকে এই সবগুলি লিখতে পারেন, তবে ম্যাপ 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)
  1. GMUClusterManager এর একটি উদাহরণ তৈরি করুন।

GMUClusterManager হল সেই ক্লাস যা আপনার দ্বারা নির্দিষ্ট করা অ্যালগরিদম, আইকন জেনারেটর এবং রেন্ডারার ব্যবহার করে মার্কার ক্লাস্টারিং প্রয়োগ করে। রেন্ডারার তৈরি করতে এবং ম্যাপ ভিউতে এটি উপলব্ধ করতে, প্রথমে ক্লাস্টার ম্যানেজার ইনস্ট্যান্স সংরক্ষণ করতে ViewController বাস্তবায়নে একটি ইনস্ট্যান্স ভেরিয়েবল যোগ করুন:

class ViewController: UIViewController, GMSMapViewDelegate {

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

এরপরে, viewDidLoad লাইফসাইকেল ইভেন্টে GMUClusterManager এর উদাহরণ তৈরি করুন:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
  1. মার্কার যোগ করুন এবং মার্কার ক্লাস্টার চালান।

এখন আপনার মার্কার ক্লাস্টারের উদাহরণ কনফিগার করা হয়েছে, ক্লাস্টার ম্যানেজারকে add(items:) কল করে ক্লাস্টার করার জন্য মার্কারগুলির অ্যারে পাস করুন, এবং তারপর ক্লাস্টার কল করে cluster চালান।

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

আপনার অ্যাপটি পুনরায় লোড করুন, এবং আপনি এখন চিত্র 6-এর উদাহরণের মতো অনেকগুলি মার্কারকে সুন্দরভাবে ক্লাস্টার করা দেখতে পাবেন। এগিয়ে যান এবং মানচিত্রে চিমটি এবং জুম করে বিভিন্ন জুম স্তরের সাথে খেলুন, আপনি জুম ইন করার সাথে সাথে মার্কার ক্লাস্টারগুলিকে মানিয়ে নিতে দেখুন /আউট।

একটি Google মানচিত্র এবং ক্লাস্টার মার্কার সহ iOS অ্যাপ

চিত্র 6. একটি Google মানচিত্র এবং ক্লাস্টার মার্কার সহ iOS অ্যাপ।

রিক্যাপ করতে, এই ধাপে আপনি iOS ইউটিলিটি লাইব্রেরির জন্য Google Maps SDK থেকে মার্কার ক্লাস্টারের একটি উদাহরণ কনফিগার করেছেন, তারপর মানচিত্রে 100টি মার্কার ক্লাস্টার করতে এটি ব্যবহার করেছেন। ViewController.swift এ আপনার viewDidLoad লাইফসাইকেল ইভেন্টটি এখন এইরকম হওয়া উচিত:

  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 ব্যবহার করে ব্যবহারকারীর ইন্টারঅ্যাকশনের কিছু অতিরিক্ত হ্যান্ডলিং যোগ করবেন, যা আপনি আগে ভিউ কন্ট্রোলারে সেট করেছিলেন।

iOS-এর জন্য Maps SDK একটি ব্যাপক ইভেন্ট সিস্টেম প্রদান করে যা ম্যাপ ভিউ প্রতিনিধির মাধ্যমে বাস্তবায়িত হয়, যার মধ্যে ইভেন্ট হ্যান্ডলার রয়েছে যা ব্যবহারকারীর বিভিন্ন ইন্টারঅ্যাকশন ঘটলে আপনাকে কোড কার্যকর করতে দেয়। উদাহরণস্বরূপ, ম্যাপভিউ প্রতিনিধির মধ্যে এমন পদ্ধতি রয়েছে যা আপনাকে ইন্টারঅ্যাকশনের জন্য কোড এক্সিকিউশন ট্রিগার করতে দেয়, যেমন ব্যবহারকারী ম্যাপ এবং মার্কারগুলিতে ক্লিক করা, ম্যাপের ভিউ প্যান করা, জুম ইন এবং আউট করা এবং আরও অনেক কিছু।

এই ধাপে, আপনি ব্যবহারকারীর দ্বারা ট্যাপ করা যেকোন মার্কারের কেন্দ্রে মানচিত্রটিকে প্রোগ্রাম্যাটিকভাবে প্যান করুন।

  1. মার্কার ট্যাপ লিসেনার প্রয়োগ করুন।

mapView(_:didTap:) বলা হয় যখন ব্যবহারকারী আপনার তৈরি করা মার্কারগুলির একটিতে ট্যাপ করে এবং যেকোন সময় ব্যবহারকারী একটি মার্কার ক্লাস্টারে ট্যাপ করে ( GMSMarker উদাহরণ হিসাবে অভ্যন্তরীণভাবে মার্কার ক্লাস্টারগুলি প্রয়োগ করা হয়)।

ইভেন্ট লিসেনার বাস্তবায়ন করতে, ক্লোজিং কোঁকড়া বন্ধনীর আগে ViewController.swift এর নীচে এটিকে স্টাব করে শুরু করুন।

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

    return false
  }

লক্ষ্য করুন যে পদ্ধতিটি false ফেরত দিচ্ছে। এটি করা iOS SDK কে ডিফল্ট GMSMarker কার্যকারিতা চালানো চালিয়ে যেতে বলে, যেমন আপনার ইভেন্ট হ্যান্ডলার কোড চালানোর পরে একটি কনফিগার করা থাকলে একটি তথ্য উইন্ডো দেখানো।

  1. ট্যাপ ইভেন্টটি পরিচালনা করুন এবং যখন একটি মার্কার বা মার্কার ক্লাস্টারে ট্যাপ করা হয় তখন মানচিত্রটিকে রিসেন্টার করতে ক্যামেরাটিকে অ্যানিমেট করুন৷

কল করা হলে, mapView(_:didTap:) GMSMarker পাস করে যা ট্যাপ করা হয়েছিল যাতে আপনি এটিকে আপনার কোডে পরিচালনা করতে পারেন। আপনি ইভেন্ট হ্যান্ডলারের ভিতর থেকে ম্যাপ ভিউতে animate(toLocation:) কল করে এবং position প্রপার্টি থেকে মার্কার ইনস্ট্যান্সের অবস্থান পাস করার মাধ্যমে ম্যাপটিকে রিস্টার করার জন্য এই উদাহরণটি ব্যবহার করতে পারেন।

    // Animate to the marker
    mapView.animate(toLocation: marker.position)
  1. একটি মার্কার ক্লাস্টারে ট্যাপ করা হলে জুম ইন করুন৷

একটি সাধারণ UX প্যাটার্ন হল মার্কার ক্লাস্টারগুলিতে ট্যাপ করার সময় জুম করা। এটি ব্যবহারকারীদের ক্লাস্টারযুক্ত মার্কারগুলি দেখতে দেয়, কারণ ক্লাস্টারটি নিম্ন জুম স্তরে প্রসারিত হয়।

যেমন আগে উল্লেখ করা হয়েছে, মার্কার ক্লাস্টার আইকন আসলে একটি কাস্টম আইকন সহ GMSMarker এর একটি বাস্তবায়ন। তাহলে আপনি কিভাবে বলতে পারেন যে একটি মার্কার বা একটি মার্কার ক্লাস্টার ট্যাপ করা হয়েছিল? যখন মার্কার ক্লাস্টার ম্যানেজার একটি নতুন ক্লাস্টার আইকন তৈরি করে, তখন এটি GMUCluster নামক একটি প্রোটোকলের সাথে সামঞ্জস্য করার জন্য GMSMarker এর উদাহরণ প্রয়োগ করে GMUCluster. ইভেন্ট হ্যান্ডলারে পাস করা মার্কার এই প্রোটোকলের সাথে সামঞ্জস্যপূর্ণ কিনা তা পরীক্ষা করতে আপনি একটি শর্তসাপেক্ষ ব্যবহার করতে পারেন।

একবার আপনি প্রোগ্রাম্যাটিকভাবে জানতে পারেন যে একটি ক্লাস্টার ট্যাপ করা হয়েছে, আপনি ম্যাপ ভিউ ইনস্ট্যান্সে animate(toZoom:) কল করতে পারেন এবং জুমটিকে বর্তমান জুম লেভেল প্লাস ওয়ানে সেট করতে পারেন। বর্তমান জুম স্তরটি camera.zoom প্রপার্টিতে mapView উদাহরণে উপলব্ধ।

এছাড়াও, নীচের কোডটি কীভাবে 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
    }

এখন অ্যাপটি পুনরায় লোড করুন এবং কিছু মার্কার এবং মার্কার ক্লাস্টারগুলিতে আলতো চাপুন৷ যখন উভয়টি ট্যাপ করা হয়, তখন মানচিত্রটি ট্যাপ করা উপাদানের উপর রিসেন্টার হবে। যখন একটি মার্কার ক্লাস্টার ট্যাপ করা হয়, তখন মানচিত্রটি একটি স্তর দ্বারা জুম করা হবে, এবং মার্কার ক্লাস্টারটি নীচে ক্লাস্টার করা মার্কারগুলিকে দেখানোর জন্য প্রসারিত হবে৷

রিক্যাপ করার জন্য, এই ধাপে আপনি মার্কার ট্যাপ লিসেনার প্রয়োগ করেছেন এবং ট্যাপ করা এলিমেন্টে রিসেন্টার করার জন্য ইভেন্টটি পরিচালনা করেছেন এবং যদি সেই উপাদানটি মার্কার ক্লাস্টার আইকন হয় তাহলে জুম ইন করুন।

আপনার 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 র্যান্ডম পয়েন্টে মার্কার দেখায় এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করে। এই কোডল্যাবের শেষ ধাপের জন্য, আপনি আপনার মানচিত্রের অভিজ্ঞতায় একটি অতিরিক্ত দরকারী বৈশিষ্ট্য যোগ করতে iOS-এর জন্য Maps SDK-এর অঙ্কন বৈশিষ্ট্যগুলি ব্যবহার করেন৷

কল্পনা করুন যে এই মানচিত্রটি সেই ব্যবহারকারীরা ব্যবহার করতে চলেছে যারা সিডনি শহরটি অন্বেষণ করতে চায়৷ একটি দরকারী বৈশিষ্ট্য একটি মার্কার চারপাশে একটি ব্যাসার্ধ কল্পনা করা হবে যখন এটি ক্লিক করা হয়. এটি ব্যবহারকারীকে সহজেই বুঝতে সাহায্য করবে যে ক্লিক করা মার্কার থেকে সহজে হাঁটার দূরত্বের মধ্যে অন্য গন্তব্যগুলি কী।

iOS SDK-তে মানচিত্রের আকার আঁকার জন্য ফাংশনের একটি সেট অন্তর্ভুক্ত রয়েছে, যেমন বর্গক্ষেত্র, বহুভুজ, লাইন এবং বৃত্ত। এই ধাপে, ক্লিক করার সময় একটি মার্কারের চারপাশে 800 মিটার (প্রায় অর্ধ মাইল) ব্যাসার্ধ দেখানোর জন্য একটি বৃত্ত রেন্ডার করুন।

  1. ভিউ কন্ট্রোলার বাস্তবায়নে একটি circle উদাহরণ ভেরিয়েবল যোগ করুন।

এই ইনস্ট্যান্স ভেরিয়েবলটি অতি সম্প্রতি আঁকা বৃত্তটি সংরক্ষণ করতে ব্যবহার করা হয়, যাতে অন্যটি আঁকার আগে এটি ধ্বংস করা যায়। সর্বোপরি, এটি ব্যবহারকারীর পক্ষে খুব সহায়ক হবে না এবং প্রতিটি ট্যাপ করা মার্কারটির চারপাশে একটি বৃত্ত আঁকা থাকলে এটি ভাল দেখাবে না!

এটি করার জন্য, ViewController বাস্তবায়ন আপডেট করুন এভাবে:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}
  1. একটি মার্কার ট্যাপ করা হলে বৃত্ত আঁকুন।

mapView(_:didTap:) পদ্ধতির ঠিক উপরে return false স্টেটমেন্টের নীচে, iOS SDK-এর GMSCircle ক্লাসের একটি উদাহরণ তৈরি করতে GMSCircle(position:radius:) কল করে একটি নতুন 800 মিটার ব্যাসার্ধের বৃত্ত আঁকতে এখানে দেখানো কোডটি যোগ করুন GMSCircle(position:radius:) এবং এটিকে ট্যাপ করা মার্কারের অবস্থানে পাস করা যেমন আপনি করেছিলেন যখন আপনি মানচিত্রটি রিসেন্টার করেছিলেন।

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
  1. বৃত্ত স্টাইল.

ডিফল্টরূপে, GMSCircle একটি কালো স্ট্রোক এবং স্বচ্ছ ভরাট সহ একটি বৃত্ত আঁকে। এটি ব্যাসার্ধ দেখানোর জন্য কাজ করে, কিন্তু এটি খুব ভাল দেখায় না এবং দেখতে একটু কঠিন। এরপর, বৃত্তের fillColor বৈশিষ্ট্যে একটি UIColor বরাদ্দ করে স্টাইলিং উন্নত করতে বৃত্তটিকে একটি পূরণ রঙ দিন। এখানে দেখানো কোডটি 50% স্বচ্ছতার সাথে একটি ধূসর ভরাট যোগ করে:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
  1. মানচিত্রে বৃত্ত রেন্ডার করুন।

ঠিক যেমন আপনি আগে মার্কার তৈরি করেছিলেন, GMSCircle এর একটি উদাহরণ তৈরি করলে তা মানচিত্রে প্রদর্শিত হয় না। এটি করার জন্য, বৃত্তের map বৈশিষ্ট্যে মানচিত্র দৃশ্যের উদাহরণ বরাদ্দ করুন।

    circle?.map = mapView
  1. পূর্বে রেন্ডার করা চেনাশোনাগুলি সরান৷

আগেই উল্লেখ করা হয়েছে, ম্যাপে চেনাশোনা যোগ করা চালিয়ে যাওয়া খুব ভালো ব্যবহারকারীর অভিজ্ঞতা হবে না। পূর্ববর্তী ট্যাপ ইভেন্ট দ্বারা রেন্ডার করা চেনাশোনাটি সরাতে, circle map বৈশিষ্ট্যটি mapView(_:didTap:) এর শীর্ষে nil সেট করুন।

    // 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. অভিনন্দন

আপনি একটি ইন্টারেক্টিভ Google মানচিত্র সমন্বিত একটি iOS অ্যাপ সফলভাবে তৈরি করেছেন৷

আপনি যা শিখেছেন

এরপর কি?

  • আরও অনুপ্রেরণার জন্য নমুনা এবং maps-sdk-for-ios-samples GitHub সংগ্রহস্থল অন্বেষণ বা কাঁটাচামচ করুন
  • Google মানচিত্র প্ল্যাটফর্মের সাথে iOS অ্যাপ তৈরি করার জন্য আরও সুইফট কোডল্যাব থেকে শিখুন
  • নীচের প্রশ্নের উত্তর দিয়ে আমাদেরকে এমন সামগ্রী তৈরি করতে সাহায্য করুন যা আপনি সবচেয়ে দরকারী বলে মনে করবেন:

আপনি অন্য কোন কোডল্যাব দেখতে চান?

মানচিত্রে ডেটা ভিজ্যুয়ালাইজেশন আমার মানচিত্রের শৈলী কাস্টমাইজ করার বিষয়ে আরও মানচিত্রে 3D মিথস্ক্রিয়া জন্য বিল্ডিং

আপনি যে কোডল্যাব চান তা কি উপরে তালিকাভুক্ত নয়? এখানে একটি নতুন সমস্যা সহ এটি অনুরোধ করুন