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 trong bản đồ mà bạn sử dụng cho ứng dụng theo dõi lô hàng trên web dành cho người tiêu dùng.

Với SDK Người dùng JavaScript, 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ể thực hiện việc này theo một trong hai cách:

  • Đơn giản nhất: Chỉ định đối tượng MarkerOptions để áp dụng cho tất cả các điểm đánh dấu cùng loại. Sau đó, SDK dành cho người 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 tiêu dùng 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: xe hoặc đích đến. 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ố lượng điểm dừng còn lại theo kế hoạch cho đến khi đến đích. 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ụ của độ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ố lượng điểm dừng còn lại cho xe 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 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êm thông tin 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 xe hoặc điểm đánh dấu vị trí. Ví dụ sau đây tạo một InfoWindow và đính kèm InfoWindow đó vào một đ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