Tùy chỉnh điểm đánh dấu

Tài liệu này trình bày cách tuỳ chỉnh điểm đánh dấu vị trí và phương tiện trong bản đồ mà bạn sử dụng cho ứng dụng theo dõi lô hàng dựa trên web dành cho người tiêu dùng.

Với SDK người tiêu dùng JavaScript, bạn có thể tuỳ chỉnh giao diện của 2 loại điểm đánh dấu được thêm vào bản đồ:

Bạn có thể thực hiện việc này theo một trong 2 cách:

  • Đơn giản nhất: Chỉ định một đối tượng MarkerOptions để áp dụng cho tất cả điểm đánh dấu cùng loại. Sau đó, SDK người tiêu dùng sẽ áp dụng kiểu trong 2 trường hợp: trước khi thêm điểm đánh dấu vào bản đồ và khi dữ liệu dùng cho điểm đánh dấu đã thay đổi.
  • Nâng cao hơn: Chỉ định một hàm tuỳ chỉnh. 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 tính năng tương tác vào điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Cụ thể, SDK người tiêu dùng sẽ truyề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 hoặc đích. Sau đó, điều này cho phép thay đổi kiểu điểm đánh dấu dựa trên trạng thái hiện tại của chính phần tử điểm đánh dấu; ví dụ: số điểm dừng đã lên kế hoạch còn lại cho đến đích. Bạn thậm chí có thể liên kết 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 đó.

Ví dụ đơn giản: sử dụ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 phương tiện bằng đối tượng MarkerOptions. Ví dụ này đặt độ mờ của điểm đánh dấu thành 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Ví dụ nâng cao: sử dụng hàm tuỳ chỉnh

Ví dụ sau đây cho thấy cách định kiểu cho điểm đánh dấu phương tiện để hiển thị số điểm dừng còn lại cho phương tiện trước khi đến điểm dừng cho tác vụ đã lên lịch.

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 tính năng xử lý lượt nhấp vào điểm đánh dấu

Bạn có thể thêm tính năng xử lý lượt nhấp vào bất kỳ điểm đánh dấu nào, chẳng hạn như trong ví dụ sau đây cho điểm đánh dấu phương tiệ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ị thông tin bổ sung cho điểm đánh dấu

Bạn có thể sử dụng InfoWindow để hiển thị thông tin bổ sung về điểm đánh dấu phương tiện hoặc vị trí. Ví dụ sau đây tạo một InfoWindow và đính kèm vào điểm đánh dấu phương tiện:

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

Bước tiếp theo