Tạo kiểu cho bản đồ

Tài liệu này trình bày cách tuỳ chỉnh giao diện của bản đồ và kiểm soát chế độ hiển thị dữ liệu cũng như các tuỳ chọn khung nhìn. Bạn có thể thực hiện việc này theo các cách sau:

• Sử dụng tính năng định kiểu bản đồ dựa trên đám mây
• Thiết lập các tuỳ chọn kiểu bản đồ ngay trong mã của riêng bạn

Định kiểu bản đồ bằng kiểu bản đồ dựa trên đám mây

Để áp dụng kiểu bản đồ cho bản đồ chia sẻ chuyến đi của người tiêu dùng bằng JavaScript, hãy chỉ định một mapId và bất kỳ mapOptions nào khác khi bạn tạo JourneySharingMapView.

Các ví dụ sau đây cho biết cách áp dụng kiểu bản đồ bằng mã bản đồ.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Tạo kiểu cho bản đồ ngay trong mã của bạn

Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách thiết lập các tuỳ chọn bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây cho biết cách tạo kiểu cho bản đồ bằng các tuỳ chọn bản đồ. Để biết thêm thông tin về các tuỳ chọn bản đồ mà bạn có thể đặt, hãy xem mapOptions trong tài liệu tham khảo API JavaScript của Google Maps.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Kiểm soát chế độ hiển thị dữ liệu công việc cho SDK

Bạn có thể kiểm soát chế độ hiển thị của một số đối tượng tác vụ nhất định trên bản đồ bằng cách sử dụng quy tắc hiển thị.

Chế độ hiển thị mặc định của dữ liệu công việc

Theo mặc định, dữ liệu cho các nhiệm vụ được giao cho một xe sẽ hiển thị khi xe ở trong phạm vi 5 điểm dừng của nhiệm vụ. Chế độ hiển thị sẽ kết thúc khi tác vụ hoàn tất hoặc bị huỷ.

Bảng này cho thấy chế độ hiển thị mặc định cho từng loại tác vụ. Bạn có thể tuỳ chỉnh chế độ hiển thị cho nhiều tác vụ, nhưng không phải tất cả. Để biết thêm thông tin chi tiết về các loại tác vụ, hãy xem phần Loại tác vụ trong hướng dẫn về Tác vụ được lên lịch.

Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đang mở trên xe

Giao diện TaskTrackingInfo cung cấp một số phần tử dữ liệu tác vụ có thể hiển thị bằng SDK dành cho người dùng.

Tuỳ chọn chế độ hiển thị cho mỗi việc cần làm

Bạn có thể tuỳ chỉnh cấu hình chế độ hiển thị trên cơ sở từng tác vụ bằng cách thiết lập TaskTrackingViewConfig khi tạo hoặc cập nhật tác vụ trong Công cụ của đội xe. Sử dụng các tuỳ chọn chế độ hiển thị sau đây để tạo tiêu chí xác định chế độ hiển thị của một phần tử công việc:

Để minh hoạ, giả sử một ví dụ về tuỳ chỉnh điều chỉnh chế độ hiển thị cho ba phần tử dữ liệu bằng cách sử dụng các tiêu chí trong bảng sau. Tất cả các phần tử khác đều tuân theo các quy tắc hiển thị mặc định.

Ví dụ sau đây cho thấy cấu hình này:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Quy tắc hiển thị vị trí xe và đường đa tuyến

Bạn không thể thấy đường đa tuyến của tuyến đường trừ phi vị trí của xe cũng hiển thị; nếu không, bạn có thể suy ra vị trí của xe bằng điểm cuối của đường đa tuyến.

Những nguyên tắc này giúp bạn cung cấp một tổ hợp hợp lệ cho các tuỳ chọn hiển thị vị trí xe và đường đa tuyến của tuyến đường.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Tắt tính năng tự động điều chỉnh

Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn cho phù hợp với xe và tuyến đường dự kiến bằng cách tắt tính năng điều chỉnh tự động. Ví dụ sau đây cho biết cách tắt tính năng tự động điều chỉnh khi bạn định cấu hình chế độ xem bản đồ chia sẻ hành trình.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Bước tiếp theo

• Tuỳ chỉnh điểm đánh dấu
• Tuỳ chỉnh đa tuyến