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 xe và điểm đánh dấu vị trí trên bản đồ mà bạn sử dụng cho ứng dụng theo dõi lô hàng dựa trên nền tảng web dành cho người tiêu dùng.

Với JavaScript Consumer SDK, bạn có thể tuỳ chỉnh giao diện của hai các 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 hai 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 thuộc cùng loại. Sau đó, SDK người tiêu dùng sẽ áp dụng kiểu trong hai trong trường hợp cụ thể: trước khi thêm điểm đánh dấu vào bản đồ và khi dữ liệu được sử dụng cho các điểm đánh dấu đã thay đổi.
  • Nâng cao hơn: Chỉ định hàm tuỳ chỉnh. Chức năng tuỳ chỉnh cho phép định kiểu điểm đánh dấu dựa trên dữ liệu, cũng như thêm tương tác với các điểm đánh dấu, chẳng hạn như xử lý nhấp chuột. Cụ thể, Người tiêu dùng SDK truyền dữ liệu sang hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu biểu thị: xe cộ hoặc điểm đến. Sau đó, thao tác này cho phép định kiểu điểm đá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ới ví dụ: số điểm dừng theo kế hoạch còn lại cho đến đích. Bạn 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 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 xe bằng một Đối tượng MarkerOptions. Ví dụ này đặt độ mờ của điểm đánh dấu là 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Ví dụ nâng cao: sử dụng chức năng tuỳ chỉnh

Ví dụ sau đây cho thấy cách thiết lập kiểu của điểm đánh dấu xe để hiển thị số điểm dừng còn lại của xe trước khi bạn đến điểm dừng việc cần làm đã 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 thao tác nhấp chuột vào điểm đánh dấu

Bạn có thể thêm thao tác nhấp chuột vào bất kỳ điểm đánh dấu nào, chẳng hạn như trong ví dụ sau cho một điểm đánh dấu xe.

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êm thông tin về xe hoặc điểm đánh dấu vị trí. Ví dụ sau đây sẽ tạo một InfoWindow rồi gắn 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();

Các bước tiếp theo