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ư cách kiểm soát chế thị khả năng hiển thị dữ liệu và các lựa chọn về 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 lựa chọn về kiểu bản đồ ngay trong mã của riêng 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 một kiểu bản đồ cho bản đồ chia sẻ hành trình của người tiêu dùng bằng JavaScript, hãy chỉ định a mapId và mọi mapOptions khác khi bạn tạo JourneySharingMapView.

Các ví dụ sau đây cho thấy cách áp dụng một 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.
});

Định kiểu bản đồ 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 lựa chọn về bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây cho thấy cách định kiểu bản đồ bằng các lựa chọn về bản đồ. Để biết thêm thông tin về những lựa chọn về bản đồ mà bạn có thể đặt, hãy xem mapOptions trong Tài liệu tham khảo API 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" }
        ]
      }
    ]
  }
});

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

Bạn có thể kiểm soát khả năng hiển thị của một số đối tượng nhiệm vụ trên bản đồ bằng các quy tắc về khả năng hiển thị.

Chế độ hiển thị mặc định của dữ liệu về việc cần làm

Theo mặc định, dữ liệu về các việc cần làm được chỉ định cho một phương tiện sẽ hiển thị khi phương tiện đó cách việc cần làm 5 điểm dừng. Chế độ hiển thị sẽ kết thúc khi việc cần làm được hoàn tất hoặc huỷ.

Bảng này cho thấy chế độ hiển thị mặc định cho 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 việc cần làm, hãy xem bài viết Các loại việc cần làm trong hướng dẫn Việc cần làm đã lên lịch.

Tuỳ chỉnh chế độ hiển thị của việc cần làm mở cho phương tiện

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

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

Bạn có thể tuỳ chỉnh cấu hình khả năng hiển thị cho từng việc cần làm bằng cách đặt TaskTrackingViewConfig khi tạo hoặc cập nhật một việc cần làm trong Fleet Engine. Hãy sử dụng các lựa chọn về 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ử về việc cần làm:

Để minh hoạ, giả sử một ví dụ về tuỳ chỉnh điều chỉnh chế độ hiển thị cho 3 phần tử dữ liệu bằ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 mặc định về chế độ hiển thị.

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

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

Các quy tắc về chế độ hiển thị của hình nhiều đường thể hiện tuyến đường và vị trí của phương tiện

Hình nhiều đường thể hiện tuyến đường sẽ không xuất hiện trừ phi vị trí của phương tiện cũng xuất hiện; nếu không, bạn có thể suy ra vị trí của phương tiện ở cuối hình nhiều đường.

Các 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ị của hình nhiều đường thể hiện tuyến đường và vị trí của phương tiện.

    "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 phương tiện 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.

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 hình nhiều đường