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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Thư viện theo dõi lô hàng JavaScript cho phép bạn trực quan hóa vị trí của các 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, là thành phần thay thế thả vào cho 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 lô hàng JavaScript, bạn có thể cung cấp trải nghiệm theo dõi lô hàng động, 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 lô hàng JavaScript cung cấp các thành phần để trực quan hóa xe và tuyến đường khi nó di chuyển đến một điểm đến, cũng như nguồn cấp dữ liệu thô cho ETA của người lái xe 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 đồ trực quan hoá vị trí của các phương tiện và điểm đến. Nếu đã biết tuyến đường cho một chiếc xe, thành phần thành phần hiển thị bản đồ sẽ tạo ảnh động cho chiếc xe đó khi nó di chuyển dọc theo đường đi dự đoán của nó.

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

Nhà cung cấp vị trí lô hàng cung cấp thông tin vị trí cho 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í vận chuyển để theo dõi:

  • Vị trí đến lấy hàng hoặc giao hàng của một lô 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í đích

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

Vị trí xe

Vị trí xe là vị trí xe được theo dõi. Thông tin này có thể bao gồm một tuyến đường cho xe (không bắt buộc).

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í lưu trữ trong Fleet Engine, bạn phải triển khai dịch vụ khai thác mã thông báo Web JSON (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, 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 đánh dấu và nhiều đường xác định giao diện của đối tượng vị trí được theo dõi trên bản đồ. Bạn có thể sử dụng các tuỳ chọn tạo 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ả các quy tắc hiển thị cho các đối tượng vị trí được theo dõi trên bản đồ cho các nhà cung cấp vị trí được xác định trước của Fleet Engine. Các nhà cung cấp vị trí tùy chỉnh hoặc bắt nguồn có thể thay đổi các quy tắc hiển thị.

Phương tiện vận chuyển

Một chiếc xe sẽ xuất hiện trong Thư viện theo dõi lô hàng khi công việc được liên kết được chỉ định cho chiếc xe đó và chiếc xe đó nằm trong phạm vi năm điểm dừng của nhiệm vụ. Chế độ hiển thị của xe sẽ kết thúc khi việc cần làm hoàn thành hoặc bị hủy.

Xe không hiển thị trong khi xe không hoạt động (chẳng hạn như khi người lái xe đang nghỉ ngơi hoặc xe đang được đổ xăng).

Tất cả các điểm đánh dấu vị trí khác

Tất cả các điểm đánh dấu vị trí khác cho điểm xuất phát, điểm đến và điểm dừng xe luôn được hiển thị trên bản đồ. Ví dụ, địa điểm giao hàng luôn hiển thị trên bản đồ, bất kể trạng thái giao hàng là gì.

Bắt đầu với Thư viện chia sẻ hành trình JavaScript

Trước khi sử dụng Thư viện hành trình chia sẻ JavaScript, hãy đảm bảo rằng 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 một thông báo xác nhận quyền sở hữu mã theo dõi.

Tạo khiếu nại về mã theo dõi

Để theo dõi 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) kèm theo thông báo xác nhận quyền sở hữu mã theo dõi.

Để tạo trọng tải JWT, hãy thêm một thông báo xác nhận quyền sở hữu khác trong mục uỷ quyền bằng khoá trackingid. Đặt giá trị của thuộc tính này thành 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 bằng 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 kèm theo 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. Điều quan trọng là bạn chỉ được đào mã thông báo trên máy chủ và không bao giờ chia sẻ chứng chỉ của mình trên bất kỳ ứng dụng nào. Nếu không, bạn sẽ làm ảnh hưởng đến tính bảo mật của hệ thống.

Ví dụ sau đây cho thấy cách tạo trình tìm nạp mã 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.ExpiresInSeconds
  };
}

Khi triển khai điểm cuối phía máy chủ để rút gọn 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 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 phát hành) đến thư viện, như minh họa trong ví dụ.

Tải bản đồ từ HTML

Ví dụ sau cho biết cách tải Thư viện theo dõi lô hàng JavaScript từ một URL được chỉ định. Thông số callback thực thi hàm initMap sau khi API tải. Thuộc tính trì hoãn 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. Xin lưu ý rằng bạn phải chỉ định tham số v=beta.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&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 nhận 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í vận chuyển

Thư viện theo dõi quá trình vận chuyển JavaScript xác định trước nhà cung cấp vị trí cho API Delivery Engine Delivery. Sử dụng mã dự án và một tệp 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
        .FleetEngineTaskLocationProvider({
          projectId,
          authTokenFetcher,

          // 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 Chia sẻ hành trình JavaScript, hãy khởi chạy chế độ xem bản đồ và thêm chế độ xem này vào trang HTML. Trang của bạn phải chứa một phần tử <div> chứa thành phần hiển thị bản đồ. Trong ví dụ sau, phần tử <div> được đặt tên là map_canvas.

Để tránh các tình huống tương tranh, hãy đặt mã theo dõi cho trình cung cấp vị trí trong lệnh gọi lại được gọi sau khi bản đồ được khởi tạo.

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 quá trình vận chuyển. Nhiệm vụ cần hiển thị được xác định như sau:

  1. Nếu có duy nhất một nhiệm vụ đến lấy hàng mở, thì nhiệm vụ đó sẽ hiển thị. 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ó duy nhất một nhiệm vụ phân phối đang mở thì nhiệm vụ đó sẽ hiển thị. Hệ thống sẽ phát sinh lỗi nếu có nhiều nhiệm vụ phân phối mở.
  3. Nếu có các nhiệm vụ phân phối đã đóng:
    • Nếu có duy nhất một nhiệm vụ phân phối đã đóng, thì nhiệm vụ đó sẽ hiển thị.
    • Nếu có nhiều tác vụ phân phối đã đóng, tác 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 khép kín mà không tác vụ nào 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ó duy nhất một nhiệm vụ đến lấy hàng đã đóng, công cụ này sẽ hiển thị.
    • Nếu có nhiều nhiệm vụ đến lấy hàng đã đóng, thì 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 nhiệm vụ đến lấy hàng đã đóng, không có nhiệm vụ nào có thời gian kết quả, thì sẽ xảy ra lỗi.
  5. Nếu không, tác vụ này sẽ không hiển thị.

Nghe 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 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 hoặc giao hàng. Những thay đổi đối với thông tin meta sẽ kích hoạ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.task.taskDuration);
});

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

Xử lý lỗi

Các lỗi phát sinh không đồng bộ khi yêu cầu thông tin vận chuyển sẽ kích hoạt các sự kiện lỗi. 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ớ bọc các lệnh gọi thư viện trong khối try...catch để xử lý các lỗi ngoài dự kiế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 đồ, hãy tạo kiểu cho bản đồ bằng cách sử dụng công cụ trên đám mây hoặc bằng cách thiết lập các tuỳ chọn trực tiếp trong mã.

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

Kiểu bản đồ 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 của Google Cloud mà không cần thay đổi mã. Các 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 lô hàng JavaScript của bạn, 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 JourneySharingMapView đã tạo bản sao. Ví dụ sau cho thấy cách bật kiểu bản đồ đã tạo trước đây 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 để tùy 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 các tuyến

Để định cấu hình định kiểu và chế độ hiển thị cho 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, vui lòng xem nội dung Giao diện Polylineline.

Ví dụ sau cho biết cách định cấu hình định kiểu và chế độ hiển thị cho các tuyến đường dự kiến. Để định cấu hình định kiểu và chế độ hiển thị các tuyến đường đã 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ính năng tuỳ chỉnh điểm đánh dấu

Với Thư viện theo dõi lô 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 điểm 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 bản cập nhật điểm đánh dấu.

Cách tuỳ 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 thuộc cùng loại. Những thay đổi được chỉ định trong đối tượng sẽ được áp dụng sau khi tạo từng điểm đánh dấu, ghi đè mọi tùy chọn mặc định.

Một lựa chọn nâng cao hơn là chỉ định chức năng tuỳ chỉnh. Các hàm tuỳ chỉnh cho phép tạo kiểu cho các đ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 các điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Cụ thể, tính năng Theo dõi lô hàng sẽ chuyển dữ liệu đến hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu đại diện: xe 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 đã lên kế hoạch còn lại cho đến đích. Bạn thậm chí có thể kết hợp với 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 các điểm đánh dấu bằng cách sử dụng MarkerOptions

Ví dụ sau cho thấy cách định cấu hình định vị của điểm đánh dấu xe bằng đối tượng MarkerOptions. Làm theo mẫu này để tùy 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ỳ tùy chỉnh điểm đánh dấu nào được liệt kê ở trên.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Thay đổi kiểu của các đ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 định vị của điểm đánh dấu xe. Làm theo mẫu này để tùy 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ỳ thông số tùy chỉnh điểm đánh dấu nào được liệt kê ở trên.

JavaScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.task.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.task.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Thêm xử lý lượt nhấp vào các điểm đánh dấu

Ví dụ sau cho thấy cách thêm tính năng xử lý lượt nhấp vào một điểm đánh dấu xe. Hãy làm theo mẫu này để thêm tính năng 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ố tùy chỉnh điểm đánh dấu nào được liệt kê ở trên.

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    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ề phương tiện hoặc điểm đánh dấu vị trí.

Ví dụ sau đây cho thấy cách tạo InfoWindow và đính kèm điểm đánh dấu đó 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.task.remainingVehicleJourneySegments.length;
  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ính năng tự động điều chỉnh cho phù hợp

Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn cho phù hợp với xe 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 thấy 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.task.remainingVehicleJourneySegments.length;
  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 có

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

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

<!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ã xác thực.
  2. Khởi động nhà cung cấp vị trí trong hàm initMap().
  3. Khởi động thành phần hiển thị bản đồ trong hàm initMap(). Chế độ xem chứa bản đồ.
  4. Chuyển tuỳ chỉnh của bạn vào hàm callback để 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 những thay đổi cần 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&v=beta&libraries=journeySharing">
    </script>
  </body>
</html>

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