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à vị trí trong bản đồ bạn dùng cho ứng dụng theo dõi lô hàng chạy trên nền tảng web dành cho người tiêu dùng.

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

Bạn có thể làm việc này bằng 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 cùng loại. Sau đó, SDK Người tiêu dùng sẽ áp dụng kiểu trong hai 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. 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 tính 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: xe hoặc điểm đến. Sau đó, việc này cho phép 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ử điểm đánh dấu; ví dụ: số điểm dừng còn lại theo kế hoạch cho đến điểm đế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 Công cụ quản lý đội xe 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 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 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 đế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 đây về đ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ề một điểm đánh dấu xe hoặc vị trí. Ví dụ sau đây tạo một InfoWindow và đính kèm 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();

Bước tiếp theo