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 đội xe của bạn bằng Thư viện theo dõi nhóm JavaScript

Thư viện theo dõi nhóm JavaScript cho phép bạn hình dung vị trí phương tiện trong đội xe gần như trong thời gian thực. Thư viện này sử dụng API Giao hàng để cho phép hình ảnh hóa các phương tiện giao hàng cũng như các công việc. Giống như Thư viện theo dõi quá trình vận chuyển JavaScript, thư viện này chứa một thành phần bản đồ JavaScript thay thế cho một thành phần dữ liệu và thành phần google.maps.Map chuẩn để kết nối với Fleet Engine.

Thành phần

Thư viện theo dõi nhóm JavaScript cung cấp các thành phần để trực quan hoá phương tiện giao hàng và điểm dừng, cũng như nguồn cấp dữ liệu thô cho ETA hoặc khoảng cách còn lại đến một lần giao hàng.

Chế độ xem bản đồ Theo dõi đội xe

Thành phần chế độ xem bản đồ Fleet Tracking (Quản lý thiết bị theo dõi) sẽ trực quan hoá vị trí của xe và nhiệm vụ. Nếu xác định được tuyến đường của một phương tiện, thì 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 đó.

Ví dụ về chế độ xem bản đồ Theo dõi Nhóm

Nhà cung cấp vị trí

Nhà cung cấp vị trí làm việc với thông tin được lưu trữ trong Fleet Engine để gửi thông tin vị trí cho các đối tượng được theo dõi vào bản đồ chia sẻ hành trình.

Nhà cung cấp dịch vụ giao xe

Nhà cung cấp vị trí của xe giao hàng hiển thị một thông tin vị trí của xe giao hàng. Nó có thông tin về vị trí của xe cũng như các nhiệm vụ mà xe giao hàng đã hoàn thành.

Nhà cung cấp dịch vụ giao hàng tận nơi

Nhà cung cấp vị trí của đội xe giao hàng hiển thị nhiều thông tin vị trí của xe. Bạn có thể lọc tìm các phương tiện hoặc vị trí cụ thể hoặc bạn có thể hiển thị toàn bộ nhóm xe.

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 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 dẫn xuất có thể thay đổi quy tắc hiển thị.

Phương tiện giao hàng

Một phương tiện giao hàng sẽ hiển thị ngay sau khi được tạo trong Fleet Engine và hiển thị trên toàn tuyến bất kể nhiệm vụ của phương tiện đó là gì.

Điểm đánh dấu vị trí việc cần làm

Bản đồ trạm dừng của phương tiện được hiển thị trên bản đồ dưới dạng điểm dừng của phương tiện. Mã đánh dấu cho các công việc đã hoàn thành sẽ được hiển thị với một kiểu khác với điểm dừng dự kiến của xe.

Vị trí của kết quả của nhiệm vụ được hiển thị với điểm đánh dấu kết quả của nhiệm vụ. Tác vụ có kết quả SUCCEEDED được hiển thị với điểm đánh dấu tác vụ thành công, trong khi tất cả tác vụ khác được hiển thị với điểm đánh dấu tác vụ không thành công.

Bắt đầu với Thư viện theo dõi nhóm JavaScript

Trước khi sử dụng Thư viện theo dõi nhóm JavaScript, hãy đảm bảo rằng bạn làm quen với Fleet Engine và nhận khóa API. Sau đó, tạo mã tác vụ và mã xe của đơn đặt hàng giao hàng.

Tạo mã nhiệm vụ và xác nhận quyền sở hữu mã xe

Để theo dõi xe giao hàng bằng nhà cung cấp vị trí xe giao hàng, hãy tạo Mã web JSON (JWT) với mã nhiệm vụ và mã nhận dạng xe giao hàng.

Để tạo tải trọng JWT, hãy thêm một xác nhận quyền sở hữu khác trong phần ủy quyền bằng các khóa taskid và deliveryvehicleid và đặt giá trị của mỗi khóa thành *. Mã thông báo phải được tạo bằng cách sử dụng vai trò IAM của Fleet Engine Service Super User. Xin lưu ý rằng thao tác này sẽ cấp quyền truy cập rộng để tạo, đọc và sửa đổi các thực thể của Fleet Engine và chỉ được chia sẻ với những người dùng đáng tin cậy.

Ví dụ sau đây cho thấy cách tạo mã thông báo để theo dõi theo phương tiện và nhiệm vụ:

{
  "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": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

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 nhóm JavaScript yêu cầu mã thông báo thông qua trình 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.ExpiresInSeconds
  };
}

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 Chia sẻ hành trình 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 xe

Phần này cho biết cách sử dụng Thư viện theo dõi nhóm JavaScript để theo dõi phương tiện 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í xe giao hàng

Thư viện theo dõi nhóm thiết bị JavaScript xác định trước nhà cung cấp vị trí cho API phân phối công cụ của nhóm thiết bị. Sử dụng mã dự án và tham chiếu đến nhà máy mã thông báo để tạo thực thể.

JavaScript

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

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

TypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-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 đồ. Phần tử <div> được đặt tên là map_canvas trong ví dụ bên dưới.

JavaScript

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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'),
  locationProvider: locationProvider,
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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);

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 deliveryVehicle bằng cách sử dụng trình cung cấp vị trí. Thông tin meta bao gồm thời gian đến dự kiến và thời gian còn lại trước khi xe đón hoặc trả xe tiếp theo. Các 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.deliveryVehicle contains data that may be        
  // useful to the rest of the UI.  
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

TypeScript

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

Nghe lỗi

Lỗi phát sinh không đồng bộ khi yêu cầu thông tin xe giao hàng 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);
});

Xem nhóm giao hàng

Phần này cho biết cách sử dụng thư viện Chia sẻ hành trình JavaScript để xem nhóm phân phối. 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í của nhóm giao hàng

Thư viện theo dõi JavaScript nhóm thiết bị xác định trước nhà cung cấp vị trí tìm nạp nhiều phương tiện từ FleetEngine Deliveryies API. Sử dụng mã dự án cũng như tham chiếu đến trình tìm nạp mã thông báo để tạo bản sao.

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter chỉ định một truy vấn dùng để lọc các phương tiện hiển thị trên bản đồ. Bộ lọc này được chuyển trực tiếp đến Fleet Engine. Hãy xem ListDeliveryVehiclesRequest.filter để biết các định dạng được hỗ trợ.

locationRestriction giới hạn khu vực hiển thị xe trên bản đồ. Cài đặt này cũng kiểm soát việc theo dõi vị trí có đang hoạt động hay không. Theo dõi vị trí sẽ không bắt đầu cho đến khi bạn đặt tùy chọn này.

Sau khi trình cung cấp vị trí được xây dựng, hãy khởi chạy thành phần hiển thị bản đồ.

Đặt giới hạn vị trí bằng chế độ xem bản đồ

Bạn có thể định cấu hình ranh giới locationRestriction để phù hợp với khu vực hiện hiển thị trong chế độ xem bản đồ.

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

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

Bạn có thể truy xuất thông tin meta về nhóm này từ đối tượng deliveryVehicles bằng cách sử dụng trình cung cấp vị trí. Thông tin meta bao gồm các thuộc tính xe như trạng thái điều hướng, khoảng cách còn lại và các thuộc tính tùy chỉnh; xem tài liệu tham khảo để biết thêm thông tin chi tiết. Sự 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.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

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

Nghe lỗi

Lỗi phát sinh không đồng bộ khi yêu cầu thông tin nhóm phân phối kích hoạt sự kiện lỗi. Để xem ví dụ minh hoạ cách theo dõi các sự kiện này, hãy tham khảo bài viết Nghe lỗi.

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 nhóm 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 biết cách bật kiểu bản đồ đã tạo trước đó bằng mã bản đồ.

JavaScript

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

TypeScript

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

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ự đoá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 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 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 nhóm 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 tùy chỉnh điểm đánh dấu, sau đó Thư viện theo dõi nhóm sẽ áp dụng trước khi thêm điểm đánh dấu vào bản đồ và với mọi cập nhật đ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 nhóm thiết bị 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: phương tiện, trạm dừng hoặc tác vụ. 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 hoặc loại tác vụ còn lại. 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 đó.

Ngoài ra, bạn có thể sử dụng các chức năng tùy chỉnh để lọc chế độ hiển thị điểm đánh dấu. Để thực hiện việc này, hãy gọi setVisible(false) trên điểm đánh dấu.

Tuy nhiên, vì lý do hiệu suất, bạn nên lọc bằng cách sử dụng bộ lọc gốc trong nhà cung cấp vị trí, chẳng hạn như FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Điều đó có nghĩa là khi cần thêm chức năng lọc, bạn có thể áp dụng tính năng lọc bằng cách sử dụng chức năng tuỳ chỉnh.

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

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

Ví dụ sau đây trình bày cách định cấu hình kiểu của điểm đánh dấu xe bằng đối tượng MarkerOptions. 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 mọi tham số tuỳ chỉnh điểm đánh dấu được liệt kê ở 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.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    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: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Lọc các điểm đánh dấu hiển thị

Ví dụ sau đây cho thấy cách lọc các điểm đánh dấu xe được hiển thị. Thực hiện theo mẫu này để lọc bất kỳ điểm đánh dấu nào 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) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

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

    // 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 delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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

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

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

Bạn có thể 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 bị 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>

Để thêm thư viện Chia sẻ hành trình JavaScript, bao gồm Theo dõi nhóm:

  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. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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, which includes Fleet Tracking functionality.
    -->
    <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 vận hành một xe giao hàng có mã nhận dạng được chỉ định gần Uluru, thì giờ đây, xe đó sẽ xuất hiện trên bản đồ.