本文說明如何自訂地圖的外觀和風格，以及控管資料顯示設定和可視區域選項。您可以選擇下列其中一種操作方式：
- 使用雲端式地圖樣式設定
- 直接在程式碼中設定地圖樣式選項
使用雲端式地圖樣式設定功能設定地圖樣式
如要將地圖樣式套用至 JavaScript 消費者行程分享地圖，請在建立 JourneySharingMapView 時指定 mapId 和任何其他 mapOptions。
以下範例說明如何使用地圖 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 站以內。 |
| 預計抵達時間 | 顯示 | 剩餘行駛距離短於 5000 公尺。 |
| 剩餘停等次數 | 永不顯示 | 車輛距離停靠站 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 個，且剩餘行車距離至少為 3, 000 公尺時，才會顯示車輛位置。 |
停用自動調整功能
您可以停用自動調整功能，讓地圖停止自動調整可視區域，以配合車輛和預期路線。以下範例說明如何在設定行程分享地圖檢視畫面時，停用自動調整功能。
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,
...
});