Оформление карты

В этом документе описывается, как настроить внешний вид карты, а также управлять видимостью данных и параметрами области просмотра. Вы можете сделать это следующими способами:

  • Используйте облачный стиль карты
  • Установите параметры стиля карты непосредственно в своем коде.

Оформите карту с помощью стилей облачных карт.

Настройте внешний вид компонента карт, используя стили облачных карт. Вы создаете и редактируете стили карт в консоли Google Cloud для любого из своих приложений, использующих Карты Google, без каких-либо изменений в коде. Дополнительную информацию см. в разделе Стилизация облачных карт .

Классы 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
  }
}

Чтобы применить стиль карты к вашей потребительской карте совместного использования поездок JavaScript, укажите mapId и любые другие mapOptions при создании JourneySharingMapView .

В следующих примерах показано, как применить стиль карты с идентификатором карты.

JavaScript 

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

Машинопись 

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 JavaScript Карт Google.

JavaScript 

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

Машинопись 

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.

Настраиваемые элементы данных задачи

Полилинии маршрута

Расчетное время до прибытия

Примерное время выполнения задачи

Оставшееся расстояние до задачи

Оставшееся количество стопов

Местоположение автомобиля

Параметры видимости для каждой задачи

Вы можете настроить конфигурацию видимости для каждой задачи, задав TaskTrackingViewConfig при создании или обновлении задачи в Fleet Engine. Используйте следующие параметры видимости, чтобы создать критерии для определения видимости элемента задачи:

Параметры видимости

Оставшееся количество стопов

Продолжительность до расчетного времени прибытия

Оставшийся пробег

Всегда виден

Никогда не виден

Для иллюстрации предположим, что пример настройки настраивает видимость для трех элементов данных с использованием критериев, показанных в следующей таблице. Все остальные элементы следуют правилам видимости по умолчанию.

Элемент данных для настройки Видимость Критерий
Полилиния маршрута Показывать Транспортное средство находится в пределах 3 остановок.
расчетное время прибытия Показывать Оставшееся расстояние меньше 5000 метров.
Оставшееся количество стопов Никогда не показывать Транспортное средство находится в пределах 3 остановок.

В следующем примере показана эта конфигурация: 

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

Полилинии маршрута и правила видимости местоположения транспортных средств

Полилинии маршрута не могут быть видны, если не видно также местоположение транспортного средства; в противном случае местоположение транспортного средства можно определить по концу ломаной линии.

Эти рекомендации помогут вам обеспечить допустимую комбинацию параметров полилинии маршрута и видимости местоположения транспортного средства.

Те же параметры видимости Критерий видимости Руководство
Для параметров полилиний маршрута установлено значение «Всегда видно». Установите местоположение автомобиля, чтобы оно всегда было видно.
Местоположение автомобиля никогда не отображается. Сделайте полилинии маршрута невидимыми.
Вариант видимости — любой из:
  • оставшийся счетчик стопов
  • продолжительность до ETA
  • оставшееся расстояние поездки

Установите для параметров полилинии маршрута значение, меньшее или равное значению, установленному для местоположения транспортного средства. Например: 

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Различные варианты видимости Критерии видимости Руководство
Местоположение автомобиля видно

Это происходит только в том случае, если параметры местоположения транспортного средства и видимости полилинии удовлетворены. Например: 

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

В этом примере местоположение транспортного средства видно только в том случае, если количество оставшихся остановок составляет не менее 3 И оставшееся расстояние поездки составляет не менее 3000 метров.

Отключить автоматическую подгонку

Вы можете запретить карте автоматически подгонять область просмотра к транспортному средству и предполагаемому маршруту, отключив автоматическую подгонку. В следующем примере показано, как отключить автоматическую подгонку при настройке представления карты совместного путешествия.

JavaScript 

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

Машинопись 

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

Что дальше