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 lựa chọn về khung hiển thị. 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

Tạo kiểu cho 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ẻ chuyến đi của người dùng JavaScript, hãy chỉ định một 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.
});

Tạo kiểu cho 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 minh hoạ cách tạo kiểu cho bản đồ bằng cách sử dụng các lựa chọn về bản đồ. Để biết thêm thông tin về những lựa chọn mà bạn có thể đặt cho bản đồ, hãy xem mapOptions trong tài liệu tham khảo về 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 về nhiệm vụ đố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ụ trên bản đồ bằng cách sử dụng các 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 những việc cần làm được giao cho một xe sẽ hiển thị khi xe cách việc cần làm đó 5 điểm dừng. Chế độ hiển thị sẽ kết thúc khi tác vụ được hoàn thành hoặc bị huỷ.

Bảng này cho biết chế độ hiển thị mặc định cho từng loại công việc. 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 Các loại tác vụ trong hướng dẫn Tác vụ định kỳ.

Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đang mở liên quan đế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 Consumer SDK.

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 thiết lập TaskTrackingViewConfig khi tạo hoặc cập nhật một nhiệm vụ trong Fleet Engine. Hãy sử dụng các lựa chọn về khả năng hiển thị sau đây để tạo tiêu chí xác định khả năng hiển thị của một phần tử trong nhiệm vụ:

Để minh hoạ, giả sử một ví dụ về hoạt động tuỳ chỉnh điều chỉnh chế độ hiển thị cho 3 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í của xe và đường nhiều đoạn

Đường đa tuyến của tuyến đường không thể xuất hiện trừ phi vị trí của xe cũng xuất hiện; 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.

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ề đường đa tuyến và khả năng hiển thị vị trí của xe.

    "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 hiển thị cho phù hợp với xe và tuyến đường dự kiến bằng cách tắt chế độ 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 đường nhiều đoạn