একটি মানচিত্র শৈলী

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

একটি ট্রিপ অনুসরণ করার সময় আপনার iOS অ্যাপে প্রদর্শিত মানচিত্রটি আপনি কীভাবে স্টাইল করতে পারেন তা এই নির্দেশিকাটি বর্ণনা করে।

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

আপনি একটি মানচিত্র স্টাইল করার আগে, আপনাকে নিম্নলিখিত জিনিসগুলি প্রয়োগ করা সহ একটি ভোক্তা অ্যাপ থাকতে হবে:

আপনাকে ব্যাকএন্ড পরিষেবাগুলি সেট আপ করতে হবে যা ভোক্তা SDK-এর প্রয়োজন, এবং উপভোক্তা SDK সেট আপ করতে হবে৷ বিস্তারিত জানার জন্য, উপভোক্তা SDK সেট আপ দেখুন এবং ফ্লিট ইঞ্জিন কি? .

মানচিত্র কাস্টমাইজেশন

উপলব্ধ কাস্টমাইজেশনগুলি নিম্নরূপ:

  • মানচিত্র স্টাইল করুন : আপনি ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে মানচিত্রের রঙ, পলিলাইন এবং অন্যান্য মানচিত্রের বৈশিষ্ট্যগুলি স্টাইল করতে পারেন। মানচিত্র শৈলী দেখুন.

  • ক্যামেরা জুম সামঞ্জস্য করুন : আপনি অন্তর্নির্মিত বৈশিষ্ট্যটি ব্যবহার করতে পারেন বা ভ্রমণে ফোকাস করতে আপনার নিজস্ব ক্যামেরা বিকল্পগুলি সেট করতে পারেন। ট্রিপে ফোকাস করতে ক্যামেরা জুম সামঞ্জস্য করুন দেখুন।

  • মার্কার এবং পলিলাইন কাস্টমাইজ করুন : আপনি আপনার অ্যাপ ডিজাইনে কাস্টম মার্কার এবং রুট পলিলাইন যোগ করতে পারেন। এই ডিজাইনের উপাদানগুলি আপনার ভোক্তা অ্যাপটিকে গাড়ির রুটের একটি গতিশীল পূর্বরূপ প্রদর্শন করতে সক্ষম করে। কাস্টমাইজ মার্কার এবং কাস্টমাইজ পলিলাইন দেখুন।

    SDK consumerMapStyleCoordinator সম্পত্তির মাধ্যমে এই বিকল্পগুলি প্রদান করে। এই সম্পত্তি GMTCMapView ক্লাসের মাধ্যমে উপলব্ধ।

ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং দিয়ে মানচিত্রটিকে স্টাইল করুন

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে মানচিত্রের উপাদানটির চেহারা এবং অনুভূতি কাস্টমাইজ করুন। আপনি Google ক্লাউড কনসোলে আপনার যেকোনও অ্যাপের জন্য ম্যাপ স্টাইল তৈরি এবং সম্পাদনা করেন যা Google ম্যাপ ব্যবহার করে, আপনার কোডে কোনো পরিবর্তন না করেই। আরও তথ্যের জন্য, ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং দেখুন।

ConsumerMapView এবং ConsumerMapFragment উভয় ক্লাসই ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং সমর্থন করে। ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করার জন্য, নিশ্চিত করুন যে নির্বাচিত মানচিত্র রেন্ডারার LATEST । নিম্নলিখিত বিভাগগুলি আপনার প্রকল্পের সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং কীভাবে ব্যবহার করবেন তার উদাহরণগুলি দেখায়৷

ConsumerMapView

ConsumerMapView এ ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, GoogleMapOptionsmapId ক্ষেত্র সেট করুন এবং getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) বা getConsumerGoogleMapAsync,FC, FMapAsync,C,C,,এ GoogleMapOptions পাস করুন GoogleMapOptions)

উদাহরণ

জাভা

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

কোটলিন

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

ConsumerMapFragments এ ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করার দুটি উপায় রয়েছে:

  • স্থিরভাবে এক্সএমএল দিয়ে।
  • newInstance সাথে গতিশীলভাবে।

স্থিরভাবে এক্সএমএল দিয়ে

ConsumerMapFragment এ XML-এর সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, নির্দিষ্ট mapId এর সাথে map:mapId XML অ্যাট্রিবিউট যোগ করুন। নিম্নলিখিত উদাহরণ দেখুন:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

newInstance সাথে গতিশীলভাবে

ConsumerMapFragmentnewInstance এর সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, GoogleMapOptionsmapId ক্ষেত্র সেট করুন এবং GoogleMapOptions কে newInstance এ পাস করুন। নিম্নলিখিত উদাহরণ দেখুন:

জাভা

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

কোটলিন

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

ট্রিপে ফোকাস করতে ক্যামেরা জুম সামঞ্জস্য করুন

একটি সক্রিয় ট্রিপ শেয়ারিং সেশন চলাকালীন, ব্যবহারকারীর পক্ষে একটি রুটে গাড়ির ক্লোজ-আপ দৃষ্টিভঙ্গির পরিবর্তে তার যাত্রার সময় গাড়ির একটি বৃহত্তর দৃশ্য দেখতে সহায়ক। এটি করার জন্য, আপনি অন্তর্নির্মিত AutoCamera ব্যবহার করে ক্যামেরার জুম স্তরটি সামঞ্জস্য করুন বা ক্যামেরার আচরণকে নিজের মতো করে কাস্টমাইজ করে নিন:

  • AutoCamera : আপনি যদি AutoCamera ব্যবহার করতে চান তবে আপনাকে কিছু করতে হবে না। ক্যামেরা ডিফল্টভাবে ট্রিপ অনুসরণ করে।

  • ক্যামেরা আচরণ কাস্টমাইজ করুন : ক্যামেরা আচরণ কাস্টমাইজ করতে, আপনাকে অবশ্যই AutoCamera অক্ষম করতে হবে এবং তারপরে আপনার কাস্টমাইজেশন করতে হবে।

AutoCamera ডিফল্টরূপে ক্যামেরাকে কেন্দ্র করে

কনজিউমার SDK একটি AutoCamera বৈশিষ্ট্য প্রদান করে যা মানচিত্র SDK-এর জন্য বিল্ট-ইন মাই লোকেশন বোতামে ডিফল্টরূপে সক্রিয় থাকে। ট্রিপ রুট এবং পরবর্তী ট্রিপ ওয়েপয়েন্টে ফোকাস করার জন্য ক্যামেরা জুম করে।

আপনি যদি AutoCamera ব্যবহার করতে চান তবে নিশ্চিত করুন যে এটি সক্রিয় আছে। আরো বিস্তারিত জানার জন্য, allowCameraAutoUpdate দেখুন।

'অটোক্যামেরা'

Maps SDK-এর জন্য আমার অবস্থান বোতামের বিশদ বিবরণের জন্য, iOS-এর জন্য Maps SDK ডকুমেন্টেশনে আমার অবস্থান বোতামটি দেখুন।

ক্যামেরা আচরণ কাস্টমাইজ করুন

ক্যামেরা আচরণের আরও নিয়ন্ত্রণের জন্য, আপনি AutoCamera অক্ষম করতে পারেন এবং ক্যামেরা আচরণ কাস্টমাইজ করতে পারেন৷

AllowCameraAutoUpdate বৈশিষ্ট্য সহ AutoCamera অক্ষম বা সক্ষম করুন৷

আরও ক্যামেরা কাস্টমাইজেশনের জন্য, iOS এর জন্য মানচিত্র SDK ডকুমেন্টেশনে ক্যামেরা সরানো দেখুন।

এরপর কি

iOS-এ একটি ট্রিপ অনুসরণ করুন

,
প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

একটি ট্রিপ অনুসরণ করার সময় আপনার iOS অ্যাপে প্রদর্শিত মানচিত্রটি আপনি কীভাবে স্টাইল করতে পারেন তা এই নির্দেশিকাটি বর্ণনা করে।

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

আপনি একটি মানচিত্র স্টাইল করার আগে, আপনাকে নিম্নলিখিত জিনিসগুলি প্রয়োগ করা সহ একটি ভোক্তা অ্যাপ থাকতে হবে:

আপনাকে ব্যাকএন্ড পরিষেবাগুলি সেট আপ করতে হবে যা ভোক্তা SDK-এর প্রয়োজন, এবং উপভোক্তা SDK সেট আপ করতে হবে৷ বিস্তারিত জানার জন্য, উপভোক্তা SDK সেট আপ দেখুন এবং ফ্লিট ইঞ্জিন কি? .

মানচিত্র কাস্টমাইজেশন

উপলব্ধ কাস্টমাইজেশনগুলি নিম্নরূপ:

  • মানচিত্র স্টাইল করুন : আপনি ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে মানচিত্রের রঙ, পলিলাইন এবং অন্যান্য মানচিত্রের বৈশিষ্ট্যগুলি স্টাইল করতে পারেন। মানচিত্র শৈলী দেখুন.

  • ক্যামেরা জুম সামঞ্জস্য করুন : আপনি অন্তর্নির্মিত বৈশিষ্ট্যটি ব্যবহার করতে পারেন বা ভ্রমণে ফোকাস করতে আপনার নিজস্ব ক্যামেরা বিকল্পগুলি সেট করতে পারেন। ট্রিপে ফোকাস করতে ক্যামেরা জুম সামঞ্জস্য করুন দেখুন।

  • মার্কার এবং পলিলাইন কাস্টমাইজ করুন : আপনি আপনার অ্যাপ ডিজাইনে কাস্টম মার্কার এবং রুট পলিলাইন যোগ করতে পারেন। এই ডিজাইনের উপাদানগুলি আপনার ভোক্তা অ্যাপটিকে গাড়ির রুটের একটি গতিশীল পূর্বরূপ প্রদর্শন করতে সক্ষম করে। কাস্টমাইজ মার্কার এবং কাস্টমাইজ পলিলাইন দেখুন।

    SDK consumerMapStyleCoordinator সম্পত্তির মাধ্যমে এই বিকল্পগুলি প্রদান করে। এই সম্পত্তি GMTCMapView ক্লাসের মাধ্যমে উপলব্ধ।

ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং দিয়ে মানচিত্রটিকে স্টাইল করুন

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে মানচিত্রের উপাদানটির চেহারা এবং অনুভূতি কাস্টমাইজ করুন। আপনি Google ক্লাউড কনসোলে আপনার যেকোনও অ্যাপের জন্য ম্যাপ স্টাইল তৈরি এবং সম্পাদনা করেন যা Google ম্যাপ ব্যবহার করে, আপনার কোডে কোনো পরিবর্তন না করেই। আরও তথ্যের জন্য, ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং দেখুন।

ConsumerMapView এবং ConsumerMapFragment উভয় ক্লাসই ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং সমর্থন করে। ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করার জন্য, নিশ্চিত করুন যে নির্বাচিত মানচিত্র রেন্ডারার LATEST । নিম্নলিখিত বিভাগগুলি আপনার প্রকল্পের সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং কীভাবে ব্যবহার করবেন তার উদাহরণগুলি দেখায়৷

ConsumerMapView

ConsumerMapView এ ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, GoogleMapOptionsmapId ক্ষেত্র সেট করুন এবং getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) বা getConsumerGoogleMapAsync,FC, FMapAsync,C,C,,এ GoogleMapOptions পাস করুন GoogleMapOptions)

উদাহরণ

জাভা

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

কোটলিন

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

ConsumerMapFragments এ ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করার দুটি উপায় রয়েছে:

  • স্থিরভাবে এক্সএমএল দিয়ে।
  • newInstance সাথে গতিশীলভাবে।

স্থিরভাবে এক্সএমএল দিয়ে

ConsumerMapFragment এ XML-এর সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, নির্দিষ্ট mapId এর সাথে map:mapId XML অ্যাট্রিবিউট যোগ করুন। নিম্নলিখিত উদাহরণ দেখুন:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

newInstance সাথে গতিশীলভাবে

ConsumerMapFragmentnewInstance এর সাথে ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করতে, GoogleMapOptionsmapId ক্ষেত্র সেট করুন এবং GoogleMapOptions কে newInstance এ পাস করুন। নিম্নলিখিত উদাহরণ দেখুন:

জাভা

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

কোটলিন

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

ট্রিপে ফোকাস করতে ক্যামেরা জুম সামঞ্জস্য করুন

একটি সক্রিয় ট্রিপ শেয়ারিং সেশন চলাকালীন, ব্যবহারকারীর পক্ষে একটি রুটে গাড়ির ক্লোজ-আপ দৃষ্টিভঙ্গির পরিবর্তে তার যাত্রার সময় গাড়ির একটি বৃহত্তর দৃশ্য দেখতে সহায়ক। এটি করার জন্য, আপনি অন্তর্নির্মিত AutoCamera ব্যবহার করে ক্যামেরার জুম স্তরটি সামঞ্জস্য করুন বা ক্যামেরার আচরণকে নিজের মতো করে কাস্টমাইজ করে নিন:

  • AutoCamera : আপনি যদি AutoCamera ব্যবহার করতে চান তবে আপনাকে কিছু করতে হবে না। ক্যামেরা ডিফল্টভাবে ট্রিপ অনুসরণ করে।

  • ক্যামেরা আচরণ কাস্টমাইজ করুন : ক্যামেরা আচরণ কাস্টমাইজ করতে, আপনাকে অবশ্যই AutoCamera অক্ষম করতে হবে এবং তারপরে আপনার কাস্টমাইজেশন করতে হবে।

AutoCamera ডিফল্টরূপে ক্যামেরাকে কেন্দ্র করে

কনজিউমার SDK একটি AutoCamera বৈশিষ্ট্য প্রদান করে যা মানচিত্র SDK-এর জন্য বিল্ট-ইন মাই লোকেশন বোতামে ডিফল্টরূপে সক্রিয় থাকে। ট্রিপ রুট এবং পরবর্তী ট্রিপ ওয়েপয়েন্টে ফোকাস করার জন্য ক্যামেরা জুম করে।

আপনি যদি AutoCamera ব্যবহার করতে চান তবে নিশ্চিত করুন যে এটি সক্রিয় আছে। আরো বিস্তারিত জানার জন্য, allowCameraAutoUpdate দেখুন।

'অটোক্যামেরা'

Maps SDK-এর জন্য আমার অবস্থান বোতামের বিশদ বিবরণের জন্য, iOS-এর জন্য Maps SDK ডকুমেন্টেশনে আমার অবস্থান বোতামটি দেখুন।

ক্যামেরা আচরণ কাস্টমাইজ করুন

ক্যামেরা আচরণের আরও নিয়ন্ত্রণের জন্য, আপনি AutoCamera অক্ষম করতে পারেন এবং ক্যামেরা আচরণ কাস্টমাইজ করতে পারেন৷

AllowCameraAutoUpdate বৈশিষ্ট্য সহ AutoCamera অক্ষম বা সক্ষম করুন৷

আরও ক্যামেরা কাস্টমাইজেশনের জন্য, iOS এর জন্য মানচিত্র SDK ডকুমেন্টেশনে ক্যামেরা সরানো দেখুন।

এরপর কি

iOS-এ একটি ট্রিপ অনুসরণ করুন