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à xe trên 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 JavaScript Consumer SDK, 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 hai cách:

  • Đơn giản nhất: Chỉ định một đối tượng MarkerOptions để áp dụng cho tất cả các điểm đánh dấu cùng loại. Sau đó, Consumer SDK sẽ áp dụng kiểu trong hai trường hợp: trước khi thêm các điểm đánh dấu vào bản đồ và khi dữ liệu dùng cho các điểm đánh dấu đã thay đổi.
  • Nâng cao hơn: Chỉ định một hàm 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 tính 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ể, Consumer SDK 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: xe hoặc điểm đến. Sau đó, việc này cho phép thay đổi kiểu đánh dấu 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ố điểm dừng đã lên kế hoạch còn lại cho đến đích đến. 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 đó.

Ví dụ đơn giản: sử dụng MarkerOptions

Ví dụ sau đây minh hoạ cách định cấu hình kiểu đánh dấu xe 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 cấu hình kiểu đánh dấu xe để hiển thị số điểm dừng còn lại của xe trước khi đến điểm dừng cho nhiệm 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 cho đ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ông tin bổ sung về một phương tiện hoặc điểm đánh dấu vị trí. Ví dụ sau đây sẽ tạo một InfoWindow và đính kèm vào một đ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