Giải pháp cuối cùng của đội xe hiện chỉ dành cho một số khách hàng. Liên hệ với bộ phận bán hàng để tìm hiểu thêm.

Theo dõi các lô hàng bằng Thư viện theo dõi quá trình vận chuyển JavaScript

Thư viện theo dõi quá trình vận chuyển JavaScript cho phép bạn hình dung vị trí của phương tiện và vị trí quan tâm được theo dõi trong Fleet Engine. Thư viện này chứa một thành phần bản đồ JavaScript thay thế cho một thực thể google.maps.Map tiêu chuẩn và các thành phần dữ liệu để kết nối với Fleet Engine. Khi sử dụng Thư viện theo dõi gửi hàng JavaScript, bạn có thể cung cấp trải nghiệm theo dõi lô hàng ảnh động và có thể tùy chỉnh từ ứng dụng web của mình.

Thành phần

Thư viện theo dõi quá trình vận chuyển JavaScript cung cấp các thành phần để trực quan hoá xe và tuyến đường khi tiến trình đến một đích đến, cũng như nguồn cấp dữ liệu thô cho ETA của người lái hoặc khoảng cách còn lại để lái xe.

Chế độ xem bản đồ Theo dõi Lô hàng

Thành phần chế độ xem bản đồ hình ảnh hóa vị trí của phương tiện và điểm đến. Nếu xác định được tuyến đường của một phương tiện, thành phần chế độ xem bản đồ sẽ tạo ảnh động cho phương tiện đó khi di chuyển dọc theo con đường dự đoán của phương tiện đó.

Nhà cung cấp địa điểm gửi hàng

Nhà cung cấp vị trí vận chuyển sẽ cung cấp thông tin vị trí của các đối tượng được theo dõi vào bản đồ theo dõi lô hàng để theo dõi lô hàng đầu tiên và cuối cùng.

Bạn có thể sử dụng nhà cung cấp vị trí lô hàng để theo dõi:

  • Địa điểm nhận hàng hoặc giao hàng.
  • Vị trí và tuyến đường của xe giao hàng.

Đối tượng vị trí được theo dõi

Trình cung cấp vị trí theo dõi vị trí của các đối tượng như phương tiện và điểm đến.

Vị trí điểm đến

Vị trí đích là vị trí kết thúc hành trình. Để theo dõi lô hàng, đây là vị trí việc cần làm theo kế hoạch.

Vị trí của xe

Vị trí của xe là vị trí xe được theo dõi. Có thể tuỳ ý bao gồm một tuyến đường cho xe.

Trình tìm nạp mã thông báo xác thực

Để kiểm soát quyền truy cập vào dữ liệu vị trí được lưu trữ trong Fleet Engine, bạn phải triển khai một mã thông báo JSON Web Token (JWT) cho Fleet Engine trên máy chủ của mình. Sau đó, hãy triển khai trình tìm nạp mã thông báo xác thực trong ứng dụng web bằng cách sử dụng Thư viện chia sẻ hành trình JavaScript để xác thực quyền truy cập vào dữ liệu vị trí.

Tùy chọn tạo kiểu

Kiểu điểm đánh dấu và nhiều đường xác định giao diện của đối tượng vị trí đã theo dõi trên bản đồ. Bạn có thể sử dụng các tuỳ chọn định kiểu tuỳ chỉnh để thay đổi kiểu mặc định cho phù hợp với kiểu của ứng dụng web.

Kiểm soát chế độ hiển thị của các vị trí được theo dõi

Phần này mô tả điều khiển hiển thị cho các đối tượng được theo dõi trên bản đồ. Các quy tắc này áp dụng cho 2 danh mục đối tượng:

  • Điểm đánh dấu vị trí
  • Dữ liệu công việc

Hiển thị điểm đánh dấu vị trí

Tất cả các điểm đánh dấu cho điểm khởi hành và điểm đến luôn được hiển thị trên bản đồ. Ví dụ: một vị trí phân phối lô hàng luôn hiển thị trên bản đồ, bất kể trạng thái phân phối.

Mức độ hiển thị dữ liệu công việc

Phần này mô tả các quy tắc hiển thị mặc định áp dụng cho dữ liệu nhiệm vụ, chẳng hạn như vị trí xe và tuyến đường còn lại. Bạn có thể tuỳ chỉnh nhiều tác vụ nhưng không phải tất cả:

  • Tác vụ không khả dụng -- Bạn không thể tùy chỉnh chế độ hiển thị cho các tác vụ này.
  • Nhiệm vụ của xe đang hoạt động -- Bạn có thể tùy chỉnh các loại nhiệm vụ này.
  • Tác vụ xe không hoạt động -- Bạn không thể tùy chỉnh chế độ hiển thị cho các tác vụ này.

Tác vụ không khả dụng

Nếu có ít nhất một nhiệm vụ không hoạt động (ví dụ: nếu tài xế đang nghỉ ngơi hoặc xe đang được tiếp nhiên liệu) trên tuyến đường đến nhiệm vụ đang được theo dõi, thì xe sẽ không hiển thị. Bạn vẫn có thể thấy thời gian đến dự kiến và thời gian hoàn thành việc cần làm ước tính.

Việc cần làm của xe đang hoạt động

Đối tượng TaskTrackingInfo cung cấp một số phần tử dữ liệu có thể hiển thị trong Thư viện theo dõi việc gửi hàng. Theo mặc định, các trường này sẽ hiển thị khi nhiệm vụ được chỉ định cho xe và khi xe ở trong phạm vi 5 điểm dừng của nhiệm vụ. Chế độ hiển thị sẽ kết thúc khi hoàn thành hoặc huỷ tác vụ. Các trường như sau:

  • Định tuyến nhiều đường
  • Thời gian đến dự kiến
  • Thời gian hoàn thành việc cần làm ước tính
  • Khoảng cách lái xe còn lại đến nhiệm vụ
  • Số lần dừng còn lại
  • Vị trí của xe

Bạn có thể tuỳ chỉnh cấu hình hiển thị trên cơ sở từng nhiệm vụ bằng cách đặt TaskTrackingViewConfig trên một nhiệm vụ khi tạo hoặc cập nhật nhiệm vụ trong Fleet Engine. Điều này tạo ra quy tắc về thời điểm có thể sử dụng các phần tử dữ liệu riêng lẻ có thể dựa trên các tiêu chí sau (gọi là tùy chọn hiển thị bên dưới):

  • Số lần dừng còn lại
  • Thời gian cho đến thời gian đến dự kiến
  • Khoảng cách lái xe còn lại
  • Luôn hiển thị
  • Không bao giờ hiển thị

Lưu ý rằng mỗi phần tử dữ liệu chỉ có thể được kết hợp với một tuỳ chọn hiển thị. Không thể kết hợp các tiêu chí bằng cách sử dụng OR hoặc AND.

Ví dụ về cách tuỳ chỉnh như sau. Quy tắc tùy chỉnh đó là:

  • Hiển thị nhiều tuyến đường nếu xe ở trong phạm vi 3 điểm dừng.
  • Hiển thị ETA nếu quãng đường lái xe còn lại ngắn hơn 5000 mét.
  • Không bao giờ hiển thị số lần dừng còn lại.
  • Mỗi trường khác vẫn giữ lại chế độ hiển thị mặc định được hiển thị khi xe nằm trong phạm vi 5 điểm dừng của nhiệm vụ.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Bạn cũng có thể tuỳ chỉnh cấu hình hiển thị mặc định cho dự án bằng cách liên hệ với nhóm hỗ trợ.

Nhiều tuyến đường và quy tắc hiển thị vị trí xe:

Khi có thể nhìn thấy nhiều tuyến đường, thông tin vị trí của xe cũng phải hiển thị, nếu không, vị trí của xe có thể được hiển thị bằng điểm cuối của nhiều đường. Điều đó có nghĩa là các tuyến đường đa tuyến không thể có tuỳ chọn hiển thị ít hạn chế hơn.

Bạn phải tuân thủ các quy tắc này để cung cấp tổ hợp tuyến đường / mức hiển thị vị trí phương tiện hợp lệ:

  • Khi tuyến đường đa chiều và vị trí của xe có cùng một loại tuỳ chọn chế độ hiển thị:

    • Nếu tuỳ chọn chế độ hiển thị vẫn là số lượng điểm dừng, thời gian cho đến khi ETA hoặc khoảng cách lái xe còn lại, thì các tuyến đường đa chiều phải cung cấp một giá trị nhỏ hơn hoặc bằng giá trị được đặt cho tuỳ chọn hiển thị này cho vị trí của xe. Ví dụ như sau:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Nếu nhiều tuyến đường có chế độ luôn hiển thị, thì vị trí của xe cũng phải cung cấp chế độ luôn hiển thị.
    • Nếu vị trí của xe có tùy chọn chế độ hiển thị không bao giờ hiển thị, thì đường đa tuyến cũng phải cung cấp tùy chọn hiển thị không bao giờ hiển thị.

  • Khi nhiều tuyến đường và vị trí xe có các loại tuỳ chọn chế độ hiển thị khác, vị trí xe chỉ xuất hiện khi cả hai tuỳ chọn chế độ hiển thị đều được đáp ứng.

    Ví dụ như sau:

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

    Trong ví dụ này, vị trí của xe chỉ hiển thị nếu số điểm dừng còn lại ít nhất là 3 VÀ quãng đường lái xe còn lại ít nhất là 3000 mét.

Bắt đầu sử dụng Thư viện chia sẻ hành trình JavaScript

Trước khi sử dụng Thư viện chia sẻ hành trình JavaScript, hãy đảm bảo bạn đã quen thuộc với Fleet Engine và nhận khoá API.

Để theo dõi quá trình phân phối, trước tiên hãy tạo xác nhận quyền sở hữu ID theo dõi.

Tạo xác nhận quyền sở hữu ID theo dõi

Để theo dõi một lô hàng bằng nhà cung cấp vị trí vận chuyển, hãy tạo Mã thông báo web JSON (JWT) với thông báo xác nhận quyền sở hữu mã theo dõi.

Để tạo tải trọng JWT, hãy thêm thông báo xác nhận quyền sở hữu bổ sung trong phần uỷ quyền bằng khoá trackingid. Đặt giá trị cho mã theo dõi lô hàng.

Ví dụ sau đây cho thấy cách tạo mã thông báo để theo dõi theo mã theo dõi:

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

Tạo trình tìm nạp mã thông báo xác thực

Bạn có thể tạo trình tìm nạp mã thông báo xác thực để truy xuất mã thông báo được đúc trong thông báo xác nhận quyền sở hữu thích hợp trên máy chủ bằng cách sử dụng chứng chỉ tài khoản dịch vụ cho dự án của bạn. Bạn chỉ nên đúc mã thông báo trên máy chủ của mình và không bao giờ chia sẻ chứng chỉ trên bất kỳ ứng dụng nào. Nếu không, bạn sẽ làm tổn hại đến tính bảo mật của hệ thống.

Trình tìm nạp phải trả về một cấu trúc dữ liệu có hai trường, được bao bọc trong Lời hứa:

  • Một chuỗi token.
  • Số expiresInSeconds. Mã thông báo sẽ hết hạn trong khoảng thời gian này sau khi tìm nạp.

Thư viện theo dõi gửi hàng JavaScript yêu cầu một mã thông báo thông qua phương thức tìm nạp mã thông báo xác thực khi có bất kỳ trường hợp nào sau đây:

  • Phương thức này không có mã thông báo hợp lệ, chẳng hạn như khi phương thức chưa gọi trình tìm nạp khi tải trang mới hoặc khi trình tìm nạp chưa trả về bằng mã thông báo.
  • Mã thông báo đã tìm nạp trước đó đã hết hạn.
  • Mã thông báo đã tìm nạp trước đó trong vòng một phút sẽ hết hạn.

Nếu không, thư viện sẽ sử dụng mã thông báo vẫn hợp lệ đã được phát hành trước đó và không gọi trình tìm nạp.

Ví dụ sau đây cho biết cách tạo trình tìm nạp mã thông báo xác thực:

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

Khi triển khai điểm cuối phía máy chủ để đúc mã thông báo, hãy lưu ý những điều sau:

  • Điểm cuối phải trả về thời gian hết hạn cho mã thông báo; trong ví dụ trên, điểm cuối được cung cấp dưới dạng data.ExpiresInSeconds.
  • Trình tìm nạp mã thông báo xác thực phải chuyển thời gian hết hạn (tính bằng giây, kể từ thời điểm tìm nạp) đến thư viện, như trong ví dụ.
  • SERVER_TOKEN_URL tùy thuộc vào triển khai chương trình phụ trợ của bạn, đây là các URL cho chương trình phụ trợ ứng dụng mẫu:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Đang tải bản đồ từ HTML

Ví dụ sau cho biết cách tải Thư viện theo dõi quá trình vận chuyển JavaScript từ một URL đã chỉ định. Thông số callback thực thi hàm initMap sau khi API tải. Thuộc tính defer cho phép trình duyệt tiếp tục hiển thị phần còn lại của trang trong khi API tải.

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

Theo dõi một lô hàng

Phần này cho biết cách sử dụng Thư viện theo dõi quá trình vận chuyển JavaScript để theo dõi quá trình lấy hàng hoặc giao hàng. Hãy nhớ tải thư viện từ hàm callback được chỉ định trong thẻ tập lệnh trước khi chạy mã.

Tạo nhà cung cấp vị trí lô hàng

Thư viện theo dõi quá trình vận chuyển JavaScript xác định sẵn nhà cung cấp vị trí cho API Fleet Engine Deliveryies. Sử dụng mã dự án và tham chiếu đến nhà máy mã thông báo của bạn để tạo bản sao.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

Khởi chạy chế độ xem bản đồ

Sau khi tải thư viện Hành trình JavaScript, hãy khởi chạy chế độ xem bản đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn phải chứa một phần tử <div> chứa chế độ xem bản đồ. Trong ví dụ sau, phần tử <div> được đặt tên là map_canvas.

Để tránh các điều kiện tranh đấu, hãy đặt mã theo dõi cho nhà cung cấp vị trí trong lệnh gọi lại được gọi sau khi khởi chạy bản đồ.

JavaScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Mã theo dõi

Mã theo dõi được cung cấp cho nhà cung cấp vị trí có thể tương ứng với một số nhiệm vụ; ví dụ: nhiệm vụ đến lấy hàng và giao hàng cho cùng một gói hoặc nhiều lần phân phối không thành công. Một nhiệm vụ được chọn để hiển thị trên bản đồ theo dõi vận chuyển. Việc cần làm sẽ hiển thị như sau:

  1. Nếu có đúng một nhiệm vụ cần lấy hàng là đang mở, hệ thống sẽ hiển thị nhiệm vụ đó. Hệ thống sẽ báo lỗi nếu có nhiều nhiệm vụ đến lấy hàng mở.
  2. Nếu có đúng một tác vụ phân phối mở, tác vụ này sẽ được hiển thị. Hệ thống sẽ báo lỗi nếu có nhiều tác vụ phân phối mở.
  3. Nếu có nhiệm vụ phân phối đã đóng:
    • Nếu có đúng một tác vụ phân phối đã đóng thì tác vụ đó sẽ hiển thị.
    • Nếu có nhiều nhiệm vụ phân phối đã đóng, nhiệm vụ có thời gian kết thúc gần đây nhất sẽ hiển thị.
    • Nếu có nhiều tác vụ phân phối đã đóng, không tác vụ nào trong số đó có thời gian kết quả, thì sẽ xảy ra lỗi.
  4. Nếu có nhiệm vụ đến lấy hàng đã đóng:
    • Nếu có đúng một nhiệm vụ lấy hàng đã đóng, thì hệ thống sẽ hiển thị nhiệm vụ đó.
    • Nếu có nhiều nhiệm vụ đến lấy hàng đã đóng, nhiệm vụ có thời gian xuất hiện gần đây nhất sẽ hiển thị.
    • Nếu có nhiều nhiệm vụ đến lấy hàng đã đóng, nhưng không có nhiệm vụ nào có thời gian thu được kết quả, hệ thống sẽ tạo ra lỗi.
  5. Nếu không, sẽ không có việc cần làm nào hiển thị.

Nghe các sự kiện thay đổi

Bạn có thể truy xuất thông tin meta về một tác vụ từ đối tượng thông tin theo dõi tác vụ bằng cách sử dụng trình cung cấp vị trí. Thông tin meta bao gồm ETA, số lượng điểm dừng còn lại và khoảng cách còn lại trước khi đến lấy hàng hoặc giao hàng. Những thay đổi đối với thông tin meta sẽ kích hoạt một sự kiện update. Ví dụ sau cho thấy cách theo dõi các sự kiện thay đổi này.

JavaScript

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

TypeScript

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

Xử lý lỗi

Lỗi phát sinh không đồng bộ trong quá trình yêu cầu thông tin vận chuyển sẽ kích hoạt các sự kiện error. Ví dụ sau cho thấy cách xử lý các sự kiện này để xử lý lỗi.

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

Lưu ý: Hãy nhớ gói các lệnh gọi thư viện trong các khối try...catch để xử lý các lỗi không mong muốn.

Tùy chỉnh giao diện của bản đồ cơ sở

Để tuỳ chỉnh giao diện của thành phần bản đồ, tạo kiểu cho bản đồ bằng cách sử dụng công cụ dựa trên đám mây hoặc trực tiếp thiết lập tuỳ chọn trong mã.

Sử dụng kiểu bản đồ dựa trên đám mây

Kiểu bản đồ dựa trên đám mây cho phép bạn tạo và chỉnh sửa kiểu bản đồ cho bất kỳ ứng dụng nào sử dụng Google Maps từ bảng điều khiển Google Cloud mà không yêu cầu bất kỳ thay đổi nào đối với mã của bạn. Kiểu bản đồ được lưu dưới dạng mã bản đồ trong dự án Cloud của bạn. Để áp dụng một kiểu cho bản đồ Theo dõi quá trình vận chuyển JavaScript, hãy chỉ định mapId khi bạn tạo JourneySharingMapView. Bạn không thể thay đổi hoặc thêm trường mapId sau khi tạo thực thể cho JourneySharingMapView. Ví dụ sau cho thấy cách bật kiểu bản đồ đã tạo trước đó với mã bản đồ.

JavaScript

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

TypeScript

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

Sử dụng kiểu bản đồ dựa trên mã

Một cách khác để tuỳ chỉnh kiểu bản đồ là đặt mapOptions khi bạn tạo JourneySharingMapView.

JavaScript

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

TypeScript

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

Thay đổi kiểu và chế độ hiển thị của tuyến đường

Để định cấu hình định kiểu và chế độ hiển thị của các tuyến đã thực hiện và dự kiến, hãy sử dụng các tuỳ chọn tạo kiểu tuỳ chỉnh. Để biết thêm thông tin, hãy xem giao diện PolylineOptions.

Ví dụ sau cho biết cách định cấu hình kiểu và chế độ hiển thị của các tuyến đường dự kiến. Để định cấu hình định kiểu và chế độ hiển thị của các tuyến đã thực hiện, hãy sử dụng takenRoutePolylineSetup thay vì anticipatedRoutePolylineSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Sử dụng tùy chỉnh điểm đánh dấu

Với Thư viện theo dõi gửi hàng JavaScript, bạn có thể tùy chỉnh giao diện của các điểm đánh dấu được thêm vào bản đồ. Bạn thực hiện việc này bằng cách chỉ định các tuỳ chỉnh của điểm đánh dấu, sau đó, Thư viện Theo dõi Lô hàng sẽ áp dụng trước khi thêm điểm đánh dấu vào bản đồ và với mọi thông tin cập nhật về điểm đánh dấu.

Tùy chỉnh đơn giản nhất là chỉ định một đối tượng MarkerOptions sẽ được áp dụng cho tất cả các điểm đánh dấu cùng loại. Các thay đổi được chỉ định trong đối tượng sẽ được áp dụng sau khi mỗi điểm đánh dấu được tạo, ghi đè mọi tuỳ chọn mặc định.

Tùy chọn nâng cao hơn là chỉ định chức năng tùy chỉnh. Các hàm tuỳ chỉnh cho phép tạo kiểu cho điểm đánh dấu dựa trên dữ liệu, cũng như thêm khả năng tương tác vào điểm đánh dấu, chẳng hạn như xử lý thao tác nhấp. Cụ thể, tính năng Theo dõi lô hàng sẽ chuyển dữ liệu cho hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu đại diện: phương tiện hoặc điểm đến. Sau đó, điều này cho phép kiểu đánh dấu thay đổi dựa trên trạng thái hiện tại của chính phần tử đánh dấu; ví dụ: số lượng điểm dừng theo kế hoạch còn lại cho đến đích. Bạn thậm chí có thể kết hợp dựa trên dữ liệu từ các nguồn bên ngoài Fleet Engine và tạo kiểu cho điểm đánh dấu dựa trên thông tin đó.

Thư viện Theo dõi lô hàng cung cấp các thông số tuỳ chỉnh sau trong FleetEngineShipmentLocationProviderOptions:

Thay đổi kiểu của điểm đánh dấu bằng MarkerOptions

Ví dụ sau đây cho thấy cách định cấu hình kiểu của điểm đánh dấu xe bằng đối tượng MarkerOptions. Làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ điểm đánh dấu nào bằng cách tuỳ chỉnh điểm đánh dấu nêu trên.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Thay đổi kiểu của điểm đánh dấu bằng các chức năng tùy chỉnh

Ví dụ sau đây minh họa cách định cấu hình điểm đánh dấu xe. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ điểm đánh dấu nào bằng cách sử dụng bất kỳ tham số tuỳ chỉnh điểm đánh dấu nào nêu trên.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Thêm xử lý lần nhấp vào điểm đánh dấu

Ví dụ sau cho biết cách thêm tính năng xử lý lượt nhấp vào một điểm đánh dấu xe. Thực hiện theo mẫu này để thêm cách xử lý lượt nhấp vào bất kỳ điểm đánh dấu nào bằng cách sử dụng bất kỳ thông số tuỳ chỉnh điểm đánh dấu nào nêu trên.

JavaScript

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

TypeScript

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

Hiển thị InfoWindow cho xe hoặc điểm đánh dấu vị trí

Bạn có thể sử dụng InfoWindow để hiển thị thêm thông tin về điểm đánh dấu xe hoặc vị trí.

Ví dụ sau đây cho thấy cách tạo InfoWindow và gắn mã đó vào điểm đánh dấu xe:

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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();

Tắt tùy chọn tự động điều chỉnh

Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn theo phương tiện và tuyến đường dự kiến bằng cách tắt tính năng tự động điều chỉnh. Ví dụ sau cho biết cách tắt tính năng tự động điều chỉnh khi bạn định cấu hình chế độ xem bản đồ chia sẻ hành trình.

JavaScript

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

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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();

Thay thế bản đồ hiện tại

Bạn có thể sử dụng Thư viện theo dõi quá trình vận chuyển JavaScript để thay thế một bản đồ hiện có bao gồm các điểm đánh dấu hoặc các tuỳ chỉnh khác mà không làm mất các tuỳ chỉnh đó.

Ví dụ: giả sử bạn có một trang web với thực thể google.maps.Map chuẩn hiển thị một điểm đánh dấu:

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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>

Cách thêm thư viện Chia sẻ hành trình JavaScript:

  1. Thêm mã cho nhà máy mã thông báo xác thực.
  2. Khởi động trình cung cấp vị trí trong hàm initMap().
  3. Khởi động chế độ xem bản đồ trong hàm initMap(). Chế độ xem chứa bản đồ.
  4. Di chuyển công cụ tùy chỉnh của bạn sang hàm gọi lại để khởi chạy chế độ xem bản đồ.
  5. Thêm thư viện vị trí vào trình tải API.

Ví dụ sau đây cho thấy các thay đổi cần được thực hiện:

<!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.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

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

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Nếu bạn có một gói đã theo dõi với mã nhận dạng được chỉ định gần Uluru, thì gói đó sẽ được kết xuất trên bản đồ.