設定地圖樣式

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

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

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

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

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

ConsumerMapView

如要在 ConsumerMapView 中使用雲端式地圖樣式設定，請設定 GoogleMapOptions 的 mapId 欄位，並將 GoogleMapOptions 傳遞至 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or 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

在以下項目中使用雲端式地圖樣式設定的方法有兩種： ConsumerMapFragments:

  • 使用 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」動態

如要在以下位置使用雲端式地圖樣式設定：newInstance ConsumerMapFragment，在 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。下例示範如何使用 地圖選項。若要進一步瞭解可設定的地圖選項，請參閱： mapOptions Google Maps JavaScript API 參考資料中。

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 顯示

可自訂的工作資料元素

路線折線

預計到達時間

預估工作完成時間

與工作相關的剩餘行車距離

剩餘停靠站數量

車輛位置

每個工作的瀏覽權限選項

您可以為每個任務自訂顯示設定，只要設定 TaskTrackingViewConfig：在 機群引擎使用下列瀏覽權限選項建立條件 如何判斷工作元素的顯示設定：

瀏覽權限選項

剩餘停靠站數量

距離預估抵達時間還有

剩餘行車距離

一律顯示

一律不顯示

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

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

以下範例說明這項設定：

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

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

除非一併提供車輛位置，否則無法顯示路徑折線 visible;否則系統就能透過 折線。

這些指南可協助您提供有效的路線組合 折線和車輛位置顯示設定選項。

相同的瀏覽權限選項 瀏覽權限條件 指引
路線折線選項已設為一律可見。 請將車輛位置資訊設為一律顯示。
車輛位置已設為一律不顯示。 將路線折線設為一律不顯示。
瀏覽權限選項如下：
  • 剩餘停靠站計數
  • 距離預計到達時間還有
  • 剩餘行車距離

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

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

後續步驟