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

این سند نحوه سفارشی کردن ظاهر و احساس یک نقشه و کنترل گزینه‌های نمای و دید داده را پوشش می‌دهد. شما می توانید این کار را به روش های زیر انجام دهید:

• از طراحی نقشه مبتنی بر ابر استفاده کنید
• گزینه های سبک نقشه را مستقیماً در کد خود تنظیم کنید

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

ظاهر و احساس جزء نقشه ها را با استفاده از سبک نقشه های مبتنی بر ابر سفارشی کنید. برای هر یک از برنامه‌های خود که از 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
  }
}

برای اعمال سبک نقشه در نقشه اشتراک گذاری سفر مصرف کننده جاوا اسکریپت خود، هنگام ایجاد JourneySharingMapView یک mapId و هر mapOptions دیگری را مشخص کنید.

توجه: پس از اینکه JourneySharingMapView نمونه برداری شد، نمی توانید یک mapId را تغییر دهید یا اضافه کنید.

مثال های زیر نحوه اعمال سبک نقشه با شناسه نقشه را نشان می دهد.

جاوا اسکریپت

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

نقشه های سبک را مستقیماً در کد خود تنظیم کنید

همچنین می‌توانید با تنظیم گزینه‌های نقشه هنگام ایجاد JourneySharingMapView استایل نقشه را سفارشی کنید. مثال‌های زیر نحوه استایل دادن به نقشه را با استفاده از گزینه‌های نقشه نشان می‌دهند. برای اطلاعات بیشتر در مورد گزینه‌های نقشه که می‌توانید تنظیم کنید، به mapOptions در مرجع API جاوا اسکریپت Google Maps مراجعه کنید.

جاوا اسکریپت

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

نمایان بودن داده های کار را در SDK کنترل کنید

شما می توانید با استفاده از قوانین دید، قابلیت مشاهده اشیاء وظیفه خاصی را روی نقشه کنترل کنید.

توجه: نشانگرهای مکان همیشه روی نقشه قابل مشاهده هستند. به عنوان مثال، بدون توجه به وضعیت تحویل، محل تحویل محموله همیشه روی نقشه نشان داده می شود. با این حال، می توانید ظاهر این نشانگرها را سفارشی کنید. به سفارشی کردن نشانگرها مراجعه کنید.

قابلیت مشاهده پیش‌فرض داده‌های وظیفه

به‌طور پیش‌فرض، داده‌های مربوط به وظایفی که به یک وسیله نقلیه اختصاص داده شده است ، زمانی قابل مشاهده هستند که خودرو در فاصله 5 ایستگاهی از کار قرار داشته باشد . هنگامی که کار تکمیل یا لغو شد، نمایان شدن به پایان می رسد.

این جدول نمایان بودن پیش فرض را برای هر نوع کار نشان می دهد. می‌توانید دید را برای بسیاری از کارها، اما نه همه، سفارشی کنید. برای جزئیات بیشتر در مورد انواع وظایف، به انواع وظایف در راهنمای کارهای زمانبندی شده مراجعه کنید.

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

قابلیت مشاهده وظایف خودروی باز را سفارشی کنید

رابط TaskTrackingInfo تعدادی از عناصر داده کار را ارائه می دهد که می توانند با Consumer SDK قابل مشاهده باشند.

عناصر داده کار قابل تنظیم
چند خطوط مسیر زمان تخمینی برای رسیدن زمان تخمینی تکمیل کار	فاصله رانندگی تا کار باقی مانده است تعداد توقف باقی مانده مکان وسیله نقلیه

گزینه های دید در هر کار

هنگام ایجاد یا به‌روزرسانی یک کار در Fleet Engine، می‌توانید با تنظیم TaskTrackingViewConfig ، پیکربندی دید را بر اساس هر کار سفارشی کنید. از گزینه های مشاهده زیر برای ایجاد معیارهایی برای تعیین نمایان بودن یک عنصر وظیفه استفاده کنید:

گزینه های دید
تعداد توقف باقی مانده مدت زمان تا زمان تخمینی رسیدن فاصله رانندگی باقی مانده	همیشه قابل مشاهده است هرگز قابل مشاهده نیست

توجه: هر عنصر داده داده شده ممکن است تنها با یک گزینه قابل مشاهده مرتبط باشد. ترکیب معیارها با استفاده از OR یا AND امکان پذیر نیست.

برای نشان دادن، فرض کنید یک نمونه سفارشی سازی دید را برای سه عنصر داده با استفاده از معیارهای نشان داده شده در جدول زیر تنظیم می کند. همه عناصر دیگر از قوانین دید پیش فرض پیروی می کنند.

عنصر داده برای تنظیم	دید	معیار
چند خط مسیر	نمایش دهید	خودرو در 3 ایستگاه است.
ETA	نمایش دهید	مسافت رانندگی باقی مانده کمتر از 5000 متر است.
تعداد توقف های باقی مانده	هرگز نشان نده	خودرو در 3 ایستگاه است.

مثال زیر این پیکربندی را نشان می دهد:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

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

چند خطوط مسیر و قوانین دید مکان خودرو

چند خطوط مسیر نمی توانند قابل مشاهده باشند مگر اینکه مکان وسیله نقلیه نیز قابل مشاهده باشد. در غیر این صورت مکان وسیله نقلیه را می توان از انتهای یک چند خط استنباط کرد.

نکته کلیدی: قوانین دید چند خطی مسیر باید به همان اندازه محدود کننده یا محدودتر از قوانین دید برای مکان وسیله نقلیه باشد.

این دستورالعمل‌ها به شما کمک می‌کند ترکیبی معتبر برای گزینه‌های دید چند خط مسیر و مکان وسیله نقلیه ارائه دهید.

گزینه های دید یکسان	معیار دید	راهنمایی
	گزینه های Route polylines روی همیشه قابل مشاهده تنظیم شده است.	مکان خودرو را روی همیشه قابل مشاهده تنظیم کنید.
	مکان خودرو روی هرگز قابل مشاهده نیست.	چند خطوط مسیر را طوری تنظیم کنید که هرگز قابل مشاهده نباشد.
	گزینه مشاهده هر یک از موارد زیر است: تعداد توقف باقی مانده مدت زمان تا زمان ETA فاصله رانندگی باقی مانده	گزینه های چند خط مسیر را روی مقداری کمتر یا مساوی مقدار تعیین شده برای مکان وسیله نقلیه تنظیم کنید. مثلا: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
گزینه های دید مختلف	معیارهای دید	راهنمایی
	محل خودرو قابل مشاهده است	این تنها زمانی اتفاق می‌افتد که هم موقعیت خودرو و هم گزینه‌های دید چند خطی راضی باشند. مثلا: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } در این مثال، مکان وسیله نقلیه تنها زمانی قابل مشاهده است که تعداد توقف باقیمانده حداقل 3 و مسافت باقیمانده رانندگی حداقل 3000 متر باشد.

اتصالات خودکار را غیرفعال کنید

با غیرفعال کردن نصب خودکار، می‌توانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیش‌بینی‌شده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی نمای نقشه اشتراک گذاری سفر نشان می دهد.

جاوا اسکریپت

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

بعدش چی

• نشانگرها را سفارشی کنید
• سفارشی کردن چند خط