「隨選乘車與運送服務」解決方案目前僅供特定合作夥伴使用。如需瞭解詳情，請聯絡銷售人員。

本頁面由 Cloud Translation API 翻譯而成。

利用 JavaScript 機群追蹤程式庫追蹤您的車隊

JavaScript 機群追蹤程式庫能以近乎即時的方式，呈現車隊中的車輛位置。這個程式庫使用 On Demand Rides and Deliveries API，允許車輛和行程視覺化。JavaScript 機群追蹤程式庫包含 JavaScript 地圖元件，可取代標準 google.maps.Map 實體和資料元件與 Fleet Engine 連線。

元件

JavaScript 機群追蹤程式庫提供可視覺化呈現車輛和行程路線點的元件，以及預計到達時間或與行程剩餘距離的原始資料動態饋給。

車隊追蹤地圖檢視

「車隊追蹤」地圖檢視元件會以視覺化的方式呈現車輛位置和行程路線控點。如果已知車輛路線，地圖檢視元件會在車輛沿著預測路徑移動時產生動畫。

機群追蹤地圖檢視範例

位置提供者

定位提供者會使用儲存在 Fleet Engine 中的資訊，將已追蹤物件的位置資訊傳送到旅程共用地圖。

車輛位置供應商

車輛位置資訊服務供應商會顯示單一車輛的位置資訊。這類函式包含車輛位置和目前指派給車輛的行程資訊。

機群位置提供者

車隊位置提供者會顯示多張車輛的位置資訊。您可以進行篩選，只顯示特定車輛及其位置，或者顯示整個車隊的車輛位置。

控管追蹤位置的瀏覽權限

瀏覽權限規則可決定 Fleet Engine 位置提供器在地圖上顯示追蹤的位置物件的時機。注意：使用自訂或衍生位置提供者可能會變更顯示規則。

交通工具

車輛在 Fleet Engine 中建立後，就能立即顯示，且如果 car_state 為 Online，就會顯示為車輛。也就是說，即使車輛沒有指派目前的行程，該車輛還是可以看到。

路線控點位置標記

路線控點位置標記會指出車輛旅程沿途的資料點，以起點出發，並以最終目的地為起點。路線控點位置標記可定義如下：

Origin - 表示車輛行程的起點
中級 - 表示車輛行程的停靠站
目的地 - 表示車輛行程的最終位置

規劃的車輛路線控點在地圖上會以起點、中間車和目的地標記的形式顯示。

開始使用 JavaScript 機群追蹤程式庫

使用 JavaScript 機群追蹤程式庫前，請務必熟悉 Fleet Engine 並取得 API 金鑰。然後建立行程 ID 和車輛 ID 聲明。

建立行程 ID 和車輛 ID 聲明

如要使用車輛位置提供者追蹤車輛，請建立含有行程 ID 和車輛 ID 憑證附加資訊的 JSON Web Token (JWT)。

如要建立 JWT 酬載，請在授權區段中新增包含金鑰 tripid 和 vehicleid 的其他憑證附加資訊，並將每個金鑰的 value 設為 *。應使用 Fleet Engine 服務超級使用者 Cloud IAM 角色來建立權杖。請注意，這會授予建立、讀取及修改 Fleet Engine 實體的大範圍權限，而且只能與信任的使用者共用。

以下範例說明如何建立用於按車輛和工作追蹤的權杖：

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

建立驗證權杖擷取工具

如果發生下列任一情況，JavaScript 機群追蹤程式庫會使用驗證權杖擷取工具要求權杖：

權杖沒有有效權杖，例如瀏覽器未在新載入網頁時呼叫擷取器，或是擷取器未傳回權杖。
它先前擷取的權杖已過期。
先前擷取的權杖會在到期後的一分鐘內。

否則，程式庫會使用先前核發且仍然有效的憑證，不會呼叫擷取程式。

您可以建立驗證權杖擷取程式，使用專案的服務帳戶憑證在伺服器上擷取具有適當憑證附加資訊的權杖。請務必只在伺服器上建立權杖，且絕對不要在任何用戶端上共用您的憑證。否則，您可能會損害系統的安全性。

擷取器必須傳回資料結構，其中包含兩個欄位，這些欄位包裝在 Promise 中：

字串 token。
數字 expiresInSeconds。憑證會在擷取後的這段時間到期。

以下範例說明如何建立驗證權杖擷取程式：

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

實作擷取權杖的伺服器端端點時，請注意下列事項：

端點必須傳回權杖的到期時間；在上述範例中，該符記指定為 data.ExpiresInSeconds。
驗證權杖擷取工具必須將到期時間 (從擷取時間開始) 傳遞至程式庫，如範例所示。
SERVER_TOKEN_URL 取決於您的後端實作項目，下列網址範例如下：
- https://SERVER_URL/token/driver/VEHICLE_ID
- https://SERVER_URL/token/consumer/TRIP_ID
- https://SERVER_URL/token/fleet_reader

從 HTML 載入地圖

以下範例說明如何從指定網址載入 JavaScript 歷程共用程式庫。「callback」參數會在 API 載入後執行 initMap 函式。defer 屬性可讓瀏覽器在 API 載入時繼續轉譯網頁的其他部分。

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

追蹤車輛

本節說明如何使用 JavaScript 機群追蹤程式庫追蹤車輛。執行程式碼前，請務必透過指令碼標記中指定的回呼函式載入程式庫。

將車輛定位服務供應商例項化

JavaScript 機群追蹤程式庫會為 On Demand Rides API 和 Deliveries API 預先定義位置提供者。請使用專案 ID 和權杖工廠參照來執行個體化權杖。

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

初始化地圖檢視

載入 JavaScript 歷程共用資料庫後，請初始化地圖檢視並加進 HTML 網頁。您的網頁應包含保留地圖檢視的 <div> 元素。在下方範例中，<div> 元素命名為 map_canvas。

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

監聽變更事件

您可以使用位置提供者從 vehicle 物件擷取車輛的中繼資訊。中繼資訊包括預計到達時間，以及車輛下次上車或下車前的剩餘距離。變更中繼資訊會觸發 update 事件。以下範例說明如何監聽這些變更事件。

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

監聽錯誤

要求車輛資訊以非同步方式發生的錯誤，會觸發錯誤事件。以下範例說明如何監聽這些事件以處理錯誤。

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

停止追蹤

如要讓定位服務供應商停止追蹤車輛，請從地點供應商中移除車輛 ID。

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

從地圖檢視中移除這個位置提供者

下例說明如何從地圖檢視中移除地點提供者。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

查看車隊

本節說明如何使用 JavaScript 歷程分享程式庫查看車隊。執行程式碼前，請務必透過指令碼標記中指定的回呼函式載入程式庫。

將車輛車隊定位服務供應商例項化

JavaScript 機群追蹤程式庫會預先定義位置提供者，以便透過 On Demand Rides API 和 Deliveries API 擷取多輛車輛。請使用您的專案 ID 和權杖擷取工具的參照，將 ID 執行個體化。

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter 會指定用來篩選地圖上顯示的車輛的查詢。這個篩選器會直接傳送至 Fleet Engine。如要瞭解支援的格式，請參閱 ListVehiclesRequest 一文。

locationRestriction 可限制在地圖上顯示車輛的區域。也會控制是否啟用位置追蹤功能。設定完成之後，系統才會開始追蹤位置。

建構位置提供者後，請初始化地圖檢視畫面。

使用地圖可視區域設定位置限制

locationRestriction 邊界可設定為與地圖檢視中顯示的區域相符。

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

監聽變更事件

您可以使用位置提供者從 vehicles 物件擷取機群的中繼資訊。中繼資訊包括車輛屬性，例如導航狀態、前往下一個路線控點的距離和自訂屬性；詳情請參閱參考說明文件。變更中繼資訊會觸發更新事件。以下範例說明如何監聽這些變更事件。

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

監聽錯誤

要求車輛車隊資訊以非同步方式發生的錯誤，會觸發錯誤事件。如需瞭解如何監聽這些事件的範例，請參閱「監聽錯誤」。

停止追蹤

如要防止位置提供者追蹤機群，請將位置提供者的邊界設為空值。

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

從地圖檢視中移除這個位置提供者

下例說明如何從地圖檢視中移除地點提供者。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

自訂基本地圖的外觀與風格

如要自訂地圖元件的外觀和風格，請使用雲端工具設定地圖樣式，或直接在程式碼中設定選項。

使用雲端式地圖樣式設定

您可以透過 Google Cloud 控制台，使用雲端式地圖樣式設定，為使用 Google 地圖的任何應用程式建立及編輯地圖樣式，無須修改程式碼。地圖樣式會在 Cloud 專案中儲存為地圖 ID。如要將樣式套用至 JavaScript 機群追蹤地圖，請在建立 JourneySharingMapView 時指定 mapId。將 JourneySharingMapView 執行個體化後，就無法變更或新增 mapId 欄位。下例說明如何啟用先前建立且具有地圖 ID 的地圖樣式。

JavaScript

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

TypeScript

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

使用程式碼式地圖樣式設定

另一種自訂地圖樣式設定的方法，是在建立 JourneySharingMapView 時設定 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" }
        ]
      }
    ]
  }
});

使用標記自訂功能

透過 JavaScript 機群追蹤程式庫，您可以自訂新增至地圖標記的外觀和風格。方法是指定標記自訂項目。這樣一來，在新增標記至地圖及每次更新標記時，系統都會套用標記自訂項目。

您可以指定 MarkerOptions 物件並套用至所有相同類型標記，建立簡易自訂項目。物件中指定的變更會在建立每個標記後套用，並覆寫任何預設選項。

如要採用更進階的選項，您可以指定自訂函式。自訂函式可讓您根據資料設定標記樣式，以及在標記中加入點擊處理等互動功能。具體來說，機群追蹤會將資料傳送至標記所代表物件類型 (車輛、停靠站或工作) 的自訂函式。如此一來，就能根據標記元素本身的目前狀態變更標記樣式，例如剩餘停靠站或任務類型。您甚至可以彙整 Fleet Engine 以外來源的資料，並根據該資訊設定標記樣式。

此外，您也可以使用自訂函式來篩選標記的瀏覽權限。如要執行上述操作，請在標記上呼叫 setVisible(false)。

然而，基於效能考量，建議您使用位置供應程式中的原生篩選功能進行篩選，例如：FleetEngineFleetLocationProvider.vehicleFilter。也就是說，如果您需要其他篩選功能，您可以使用自訂函式來套用篩選功能。

機群追蹤程式庫提供下列自訂參數：

使用 `MarkerOptions` 變更標記樣式

下例說明如何使用 MarkerOptions 物件設定車輛標記樣式。請按照這個模式，使用上述任一標記自訂參數自訂任何標記的樣式。

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

使用自訂函式變更標記樣式

以下範例說明如何設定車輛標記樣式。請按照這個模式使用上述任一標記自訂參數，自訂任何標記的樣式。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

在標記中加入點擊處理方式

以下範例說明如何在車輛標記中新增點擊處理方式。請按照這個模式，使用上述任一標記自訂參數，為任何標記新增點擊處理機制。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

篩選可見標記

下例說明如何篩選可見的車輛標記。請按照這個模式，使用上述任一標記自訂參數篩選任何標記。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

行經車輛時使用折線自訂功能

使用機群追蹤程式庫，即可在地圖上自訂下方車輛路線的外觀和風格。程式庫會為車輛啟用中或其餘路徑中的每組座標建立 google.maps.Polyline 物件。您可以指定折線自訂項目來設定 Polyline 物件的樣式。接著，程式庫會在以下兩種情況下套用這些自訂項目：將物件加入地圖之前，以及用於物件的資料已變更。

與標記自訂作業類似，您可以指定一組 PolylineOptions，在建立或更新所有相符的 Polyline 物件時套用。

同樣地，您也可以指定自訂函式。自訂函式可讓您根據 Fleet Engine 傳送的資料，為物件設定個別樣式。此函式可根據車輛的當前狀態變更每個物件的樣式。舉例來說，將 Polyline 物件上色較深，或在車輛移動速度較慢時加粗。您甚至可以和 Fleet Engine 以外的來源進行彙整，並根據該資訊設定 Polyline 物件的樣式。

您可以使用 FleetEngineVehicleLocationProviderOptions 中提供的參數指定自訂項目。您可以為車輛歷程中的不同路徑狀態 (已行經、正在積極旅遊或尚未旅遊) 設定自訂項目。參數如下：

takenPolylineCustomization，用於已經行駛的路徑；
activePolylineCustomization，用於主動行駛路徑；
remainingPolylineCustomization，適用於尚未行駛的路徑。

使用 `PolylineOptions` 變更 `Polyline` 物件的樣式

以下範例說明如何使用 PolylineOptions 設定 Polyline 物件的樣式。請按照這個模式，使用前述的任一折線自訂設定自訂任何 Polyline 物件的樣式。

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

使用自訂函式變更 `Polyline` 物件的樣式

以下範例說明如何設定有效 Polyline 物件的樣式。請按照這個模式，使用前述的任一折線自訂參數來自訂任何 Polyline 物件的樣式。

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

控制 `Polyline` 物件的瀏覽權限

根據預設，系統會顯示所有 Polyline 物件。如要隱藏 Polyline 物件，請設定其 visible 屬性：

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

轉譯流量感知 `Polyline` 物件

Fleet Engine 會傳回下列車輛中途經及其餘路徑的車速資料。您可以使用這項資訊，根據物件的流量速度Polyline設定物件樣式：

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

為車輛或位置標記顯示 `InfoWindow`

您可以使用 InfoWindow 顯示車輛或位置標記的其他資訊。

下例說明如何建立 InfoWindow 並附加至車輛標記。

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

停用自動合框功能

您可以停用自動合框功能，禁止地圖自動根據可視區域調整到車輛大小，並停止調整預測路徑。以下範例說明如何在設定旅程共用地圖檢視時，停用自動合框功能。

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

取代現有地圖

您可以取代含有標記或其他自訂項目的現有地圖，但不會保留這些自訂設定。

舉例來說，假設您有一個網頁內含標準 google.maps.Map 實體，並在其中顯示標記：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

如何新增內含機群追蹤功能的 JavaScript 歷程共用資料庫：

新增驗證權杖工廠程式碼。
在 initMap() 函式中初始化位置提供者。
在 initMap() 函式中初始化地圖檢視。檢視畫麵包含地圖。
將自訂內容移至地圖檢視初始化的回呼函式。
將位置程式庫加入 API 載入器。

以下範例顯示需要進行的變更：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

如果你在 Oracle Park 附近操作含有指定 ID 的車輛，該車輛就會在地圖上顯示。

利用 JavaScript 機群追蹤程式庫追蹤您的車隊

元件

車隊追蹤地圖檢視

位置提供者

車輛位置供應商

機群位置提供者

控管追蹤位置的瀏覽權限

交通工具

路線控點位置標記

開始使用 JavaScript 機群追蹤程式庫

建立行程 ID 和車輛 ID 聲明

建立驗證權杖擷取工具

JavaScript

TypeScript

從 HTML 載入地圖

追蹤車輛

將車輛定位服務供應商例項化

JavaScript

TypeScript

初始化地圖檢視

JavaScript

TypeScript

監聽變更事件

JavaScript

TypeScript

監聽錯誤

JavaScript

TypeScript

停止追蹤

JavaScript

TypeScript

從地圖檢視中移除這個位置提供者

JavaScript

TypeScript

查看車隊

將車輛車隊定位服務供應商例項化

JavaScript

TypeScript

使用地圖可視區域設定位置限制

JavaScript

TypeScript

監聽變更事件

JavaScript

TypeScript

監聽錯誤

停止追蹤

JavaScript

TypeScript

從地圖檢視中移除這個位置提供者

JavaScript

TypeScript

自訂基本地圖的外觀與風格

使用雲端式地圖樣式設定

JavaScript

TypeScript

使用程式碼式地圖樣式設定

JavaScript

TypeScript

使用標記自訂功能

使用 MarkerOptions 變更標記樣式

JavaScript

TypeScript

使用自訂函式變更標記樣式

JavaScript

TypeScript

在標記中加入點擊處理方式

JavaScript

TypeScript

篩選可見標記

JavaScript

TypeScript

行經車輛時使用折線自訂功能

使用 PolylineOptions 變更 Polyline 物件的樣式

JavaScript

TypeScript

使用自訂函式變更 Polyline 物件的樣式

JavaScript

TypeScript

控制 Polyline 物件的瀏覽權限

JavaScript

使用 `MarkerOptions` 變更標記樣式

使用 `PolylineOptions` 變更 `Polyline` 物件的樣式

使用自訂函式變更 `Polyline` 物件的樣式

控制 `Polyline` 物件的瀏覽權限

轉譯流量感知 `Polyline` 物件

為車輛或位置標記顯示 `InfoWindow`