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

پلتفرم را انتخاب کنید: Android iOS JavaScript

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

قبل از شروع

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

• نمای نقشه به Initialize the map مراجعه کنید.

• راهی برای مدیریت رویدادهای نمای نقشه. به رویدادهای نمای نقشه رسیدگی کنید

همچنین باید سرویس‌های پشتیبان مورد نیاز Consumer SDK را تنظیم کرده و Consumer SDK را راه‌اندازی کنید. برای جزئیات، به تنظیم SDK مصرف کننده و Fleet Engine چیست مراجعه کنید؟ .

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

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

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

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

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

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

نقشه را با طراحی نقشه های مبتنی بر ابر طراحی کنید

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

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

ConsumerMapView

برای استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر در ConsumerMapView ، فیلد mapId در GoogleMapOptions تنظیم کنید و GoogleMapOptions به getConsumerGoogleMapAsync(ConsumerMapReadyCallback، Fragment، GoogleMapOptions) یا getConsumerGoogleMapAsync(ConsumerConsumerCallback,FragdyConsumerCallback) ارسال کنید.

مثال

جاوا

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 ، ویژگی map:mapId XML را با 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 دنبال کنید

،

پلتفرم را انتخاب کنید: Android iOS JavaScript

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

قبل از شروع

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

• نمای نقشه به Initialize the map مراجعه کنید.

• راهی برای مدیریت رویدادهای نمای نقشه. به رویدادهای نمای نقشه رسیدگی کنید

همچنین باید سرویس‌های پشتیبان مورد نیاز Consumer SDK را تنظیم کرده و Consumer SDK را راه‌اندازی کنید. برای جزئیات، به تنظیم SDK مصرف کننده و Fleet Engine چیست مراجعه کنید؟ .

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

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

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

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

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

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

نقشه را با طراحی نقشه های مبتنی بر ابر طراحی کنید

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

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

ConsumerMapView

برای استفاده از طرح‌بندی نقشه‌های مبتنی بر ابر در ConsumerMapView ، فیلد mapId در GoogleMapOptions تنظیم کنید و GoogleMapOptions به getConsumerGoogleMapAsync(ConsumerMapReadyCallback، Fragment، GoogleMapOptions) یا getConsumerGoogleMapAsync(ConsumerConsumerCallback,FragdyConsumerCallback) ارسال کنید.

مثال

جاوا

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 ، ویژگی map:mapId XML را با 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 دنبال کنید