به یک نقشه سبک دهید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

این راهنما روش‌هایی را شرح می‌دهد که می‌توانید نقشه‌ای را که هنگام دنبال کردن یک سفر در برنامه iOS شما نمایش داده می‌شود، استایل‌بندی کنید.

قبل از اینکه شروع کنی

قبل از اینکه به نقشه استایل بدهید، باید یک اپلیکیشن مصرف‌کننده داشته باشید که موارد زیر در آن پیاده‌سازی شده باشد:

همچنین باید سرویس‌های backend مورد نیاز Consumer SDK را راه‌اندازی کرده باشید و Consumer SDK را راه‌اندازی کنید. برای جزئیات بیشتر، به Setup the Consumer SDK و What is Fleet Engine? مراجعه کنید.

سفارشی‌سازی نقشه

سفارشی‌سازی‌های موجود به شرح زیر است:

  • سبک‌دهی به نقشه : می‌توانید با استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر، رنگ‌ها، خطوط چندضلعی و سایر ویژگی‌های نقشه را سبک‌دهی کنید. به بخش سبک‌دهی به نقشه مراجعه کنید.

  • تنظیم زوم دوربین : می‌توانید از ویژگی داخلی استفاده کنید یا گزینه‌های دوربین خودتان را برای تمرکز روی سفر تنظیم کنید. به بخش تنظیم زوم دوربین برای تمرکز روی سفر مراجعه کنید.

  • سفارشی‌سازی نشانگرها و خطوط چندخطی : می‌توانید نشانگرها و خطوط چندخطی مسیر سفارشی را به طراحی برنامه خود اضافه کنید. این عناصر طراحی، برنامه Consumer شما را قادر می‌سازند تا پیش‌نمایش پویایی از مسیر وسیله نقلیه نمایش دهد. به «سفارشی‌سازی نشانگرها» و «سفارشی‌سازی خطوط چندخطی» مراجعه کنید.

    SDK این گزینه‌ها را از طریق ویژگی consumerMapStyleCoordinator ارائه می‌دهد. این ویژگی از طریق کلاس GMTCMapView در دسترس است.

نقشه را با استفاده از سبک نقشه‌های مبتنی بر ابر، استایل دهید

ظاهر و حس کامپوننت نقشه‌ها را با استفاده از سبک‌بندی نقشه‌های مبتنی بر ابر سفارشی کنید. شما می‌توانید سبک‌های نقشه را در کنسول Google Cloud برای هر یک از برنامه‌های خود که از Google Maps استفاده می‌کنند، بدون نیاز به هیچ تغییری در کد خود، ایجاد و ویرایش کنید. برای اطلاعات بیشتر، پلتفرم خود را در سبک‌بندی نقشه‌های مبتنی بر ابر انتخاب کنید.

هر دو کلاس ConsumerMapView و ConsumerMapFragment از استایل‌بندی نقشه‌های مبتنی بر ابر پشتیبانی می‌کنند. برای استفاده از استایل‌بندی نقشه‌های مبتنی بر ابر، مطمئن شوید که رندرکننده نقشه‌های انتخاب شده LATEST باشد. بخش‌های زیر نمونه‌هایی از نحوه استفاده از استایل‌بندی نقشه‌های مبتنی بر ابر را در پروژه شما نشان می‌دهد.

ConsumerMapView

برای استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر در ConsumerMapView ، فیلد mapId روی GoogleMapOptions تنظیم کنید و GoogleMapOptions به getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) یا getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, 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 وجود دارد:

  • به صورت ایستا با XML.
  • به صورت پویا با newInstance .

به صورت ایستا با XML

برای استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر با XML در ConsumerMapFragment ، ویژگی XML map:mapId با mapId مشخص شده اضافه کنید. به مثال زیر توجه کنید:

<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

برای استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر با newInstance در ConsumerMapFragment ، فیلد mapId روی GoogleMapOptions تنظیم کنید و 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 به طور پیش‌فرض دوربین را در مرکز قرار می‌دهد

کیت توسعه نرم‌افزار مصرف‌کننده (Consumer SDK) یک ویژگی AutoCamera ارائه می‌دهد که به طور پیش‌فرض روی دکمه «موقعیت مکانی من» (My Location) تعبیه‌شده برای کیت توسعه نرم‌افزار نقشه‌ها (Maps SDK) فعال است. دوربین برای تمرکز روی مسیر سفر و نقطه مسیر بعدی، زوم می‌کند.

اگر می‌خواهید از AutoCamera استفاده کنید، مطمئن شوید که فعال است. برای جزئیات بیشتر، به allowCameraAutoUpdate مراجعه کنید.

«دوربین خودکار»

برای جزئیات بیشتر در مورد دکمه «موقعیت مکانی من» برای Maps SDK، به دکمه «موقعیت مکانی من» در مستندات Maps SDK برای iOS مراجعه کنید.

سفارشی‌سازی رفتار دوربین

برای کنترل بیشتر رفتار دوربین، می‌توانید AutoCamera غیرفعال کنید و رفتار دوربین را سفارشی‌سازی کنید.

AutoCamera با استفاده از ویژگی AllowCameraAutoUpdate غیرفعال یا فعال کنید.

برای سفارشی‌سازی‌های بیشتر دوربین، به بخش «جابجایی دوربین» در مستندات Maps SDK برای iOS مراجعه کنید.

قدم بعدی چیست؟

دنبال کردن یک سفر در iOS