設定地圖樣式

本文件將說明如何自訂地圖的外觀和風格，以及控管資料顯示和檢視區選項。您可以選擇下列其中一種操作方式：

  • 使用雲端式地圖樣式設定
  • 直接在程式碼中設定地圖樣式選項

使用雲端式地圖樣式設定設定地圖樣式

使用雲端式地圖樣式設定，自訂地圖元件的外觀與風格。如要在 Google Cloud 控制台中建立及編輯地圖樣式， 您完全不需要修改程式碼。 詳情請參閱「雲端式地圖樣式設定」。

ConsumerMapView 和 ConsumerMapFragment 類別都支援雲端式地圖樣式設定。如要使用雲端式地圖樣式設定，請確認所選地圖 轉譯器為 LATEST。下列各節提供使用範例 雲端式地圖樣式設定。

ConsumerMapView

如要在 ConsumerMapView 中使用雲端地圖樣式，請在 GoogleMapOptions 上設定 mapId 欄位，並將 GoogleMapOptions 傳遞至 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) 或 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

範例

Java

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);
    }
  }
}

Kotlin

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

在 ConsumerMapFragment 中使用雲端式地圖樣式設定的方式有兩種：

  • 使用 XML 的靜態方式。
  • 使用 newInstance 動態設定。

使用 XML 的靜態

如要搭配 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 動態

如要在 ConsumerMapFragment 中使用雲端式地圖樣式搭配 newInstance，請在 GoogleMapOptions 上設定 mapId 欄位，並將 GoogleMapOptions 傳遞至 newInstance。請參閱以下範例：

Java

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;
  }
}

Kotlin

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 時啟用。

以下範例說明如何套用含有地圖 ID 的地圖樣式。

JavaScript

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。下例示範如何使用 地圖選項。如要進一步瞭解可設定的地圖選項，請參閱 Google Maps JavaScript API 參考資料中的 mapOptions。

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" }
        ]
      }
    ]
  }
});

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，根據每項工作自訂顯示設定。使用下列瀏覽權限選項建立條件 如何判斷工作元素的顯示設定：

瀏覽權限選項

剩餘停靠站數

距離預估抵達時間還有

剩餘行車距離

一律顯示

一律不顯示

為了方便說明，假設某個自訂範例將分別調整 定義資料元素。所有其他元素都會遵循預設的瀏覽權限規則。

要調整的資料元素 顯示設定 條件
路線折線 顯示 車輛距離 3 個站內。
預計抵達時間 顯示 剩餘行車距離少於 5,000 公尺。
剩餘停靠站數 不再顯示 車輛距離 3 個站內。

以下範例說明這項設定：

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

路線折線和車輛位置顯示規則

除非車輛位置也顯示出來，否則路線多邊形無法顯示；否則，車輛位置可由多邊形的端點推斷。

這些規範可協助您提供路線多邊形和車輛位置顯示選項的有效組合。

相同的瀏覽權限選項 曝光度條件 指引
路線折線選項設為一律顯示。 請將車輛位置資訊設為一律顯示。
車輛位置設為「永不顯示」。 將路線折線設為永不顯示。
瀏覽權限選項如下：
  • 剩餘停靠站數量
  • 到達時間
  • 剩餘行車距離

將路線折線選項設為小於或等於集的值 查詢車輛位置例如：

    "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,
  ...
});

TypeScript

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

後續步驟