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 đồ, cũng như kiểm soát chế độ hiển thị dữ liệu và các lựa 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
  • Đặt các tuỳ chọn kiểu bản đồ ngay trong mã của bạn

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

Để áp dụng kiểu bản đồ cho bản đồ chia sẻ hành trình của người tiêu dù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 thấy cách áp dụng kiểu bản đồ bằng mã bản đồ.

JavaScript

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

TypeScript

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 đồ phong cách riêng ngay trong mã của riêng bạn

Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách đặt các tuỳ chọn bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây cho thấy 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 lựa 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.

JavaScript

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

TypeScript

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ủa việc cần làm đối với SDK

Bạn có thể kiểm soát chế độ hiển thị của một số đối tượng nhiệm 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 việc cần làm

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 đó cách nhiệm vụ trong vòng 5 điểm dừng. Trạng thái hiển thị sẽ kết thúc khi việc cần làm hoàn tất hoặc bị huỷ.

Bảng này cho biết chế độ hiển thị mặc định của từng loại việc cần làm. Bạn có thể tuỳ chỉnh chế độ hiển thị cho nhiều việc cần làm, 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ụ theo lịch.

Loại việc cần làm Chế độ hiển thị mặc định Có thể tuỳ chỉnh không? Mô tả
Việc cần làm khi không có mặt Không hiển thị Không Dùng để tài xế nghỉ ngơi và nạp nhiên liệu. Nếu một tuyến đường đến một nhiệm vụ giao hàng cũng có một điểm dừng khác của xe, thì điểm dừng đó sẽ không xuất hiện nếu chỉ chứa các nhiệm vụ không có sẵn. Thời gian đến dự kiến và thời gian hoàn thành nhiệm vụ dự kiến vẫn được hiển thị cho chính nhiệm vụ giao hàng.
Việc cần làm liên quan đến xe đang mở Hiển thị Có Chế độ hiển thị sẽ kết thúc khi việc cần làm hoàn tất hoặc bị huỷ. Bạn có thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ còn mở liên quan đến xe. Xem phần Tuỳ chỉnh chế độ hiển thị của các việc cần làm chưa hoàn thành liên quan đến xe.
Việc cần làm đã đóng về xe Không hiển thị Không Bạn không thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ xe đã đóng.

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

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 Người tiêu dùng.

Các phần tử dữ liệu nhiệm vụ có thể tuỳ chỉnh

Hình nhiều đường thể hiện tuyến đường

Thời gian đến dự kiến

Thời gian hoàn thành nhiệm vụ ước tính

Quãng đường lái xe còn lại để đến địa điểm thực hiện nhiệm vụ

Số lần dừng còn lại

Vị trí xe

Các lựa chọn về chế độ hiển thị cho từng việc cần làm

Bạn có thể tuỳ chỉnh cấu hình chế độ hiển thị theo từng nhiệm vụ bằng cách đặt TaskTrackingViewConfig khi tạo hoặc cập nhật một nhiệm vụ trong Fleet Engine. Sử dụng các tuỳ chọn hiển thị sau đây để tạo tiêu chí xác định chế độ hiển thị của một phần tử tác vụ:

Tuỳ chọn hiển thị

Số lần dừng còn lại

Thời gian cho đến thời gian đến dự kiến

Quãng đường còn lại

Luôn hiển thị

Không bao giờ hiển thị

Để 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 quy tắc hiển thị mặc định.

Phần tử dữ liệu cần điều chỉnh Chế độ hiển thị Tiêu chí
Hình nhiều đường thể hiện tuyến đường Chương trình Xe còn cách 3 điểm dừng.
ETA Chương trình Quãng đường lái xe còn lại ngắn hơn 5.000 mét.
Số lần dừng còn lại Không bao giờ hiển thị Xe còn cách 3 điểm dừng.

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

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

Hình nhiều đường thể hiện tuyến đường và quy tắc hiển thị vị trí của xe

Đường đa tuyến của tuyến đường không thể hiển thị trừ phi vị trí của xe cũng hiển thị; nếu không, vị trí của xe có thể được suy ra từ đ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 lựa chọn về chế độ hiển thị vị trí của xe và hình nhiều đường của tuyến đường.

Các lựa chọn tương tự về chế độ hiển thị Tiêu chí về chế độ hiển thị Hướng dẫn
Các lựa chọn về hình nhiều đường của tuyến đường được đặt thành luôn hiển thị. Đặt vị trí của xe thành luôn hiển thị.
Vị trí của xe được đặt thành không bao giờ hiển thị. Đặt các đường đa tuyến của tuyến đường thành không bao giờ hiển thị.
Chế độ hiển thị là một trong những chế độ sau:
  • số lần dừng còn lại
  • thời gian đến ETA
  • quãng đường lái xe còn lại

Đặt các tuỳ chọn hình nhiều đường của tuyến đường thành một giá trị nhỏ hơn hoặc bằng giá trị được đặt cho vị trí của xe. Ví dụ:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Các chế độ hiển thị Tiêu chí về khả năng hiển thị Hướng dẫn
Vị trí của xe đang hiển thị

Điều này chỉ xảy ra khi cả hai lựa chọn về vị trí của xe và chế độ hiển thị hình nhiều đường đều được đáp ứng. Ví dụ:

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

Trong ví dụ này, vị trí của xe chỉ hiển thị nếu số điểm dừng còn lại ít nhất là 3 VÀ quãng đường lái xe còn lại ít nhất là 3.000 mét.

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 tự động điều chỉnh. Ví dụ sau đây cho thấy 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.

JavaScript

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

TypeScript

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