Theo dõi đội xe của bạn bằng Thư viện theo dõi nhóm JavaScript

Thư viện theo dõi nhóm JavaScript cho phép bạn trực quan hoá vị trí của xe trong đội xe của bạn gần như theo thời gian thực. Thư viện này sử dụng thẻ Theo yêu cầu Gọi xe và giao hàng API để cho phép trình bày trực quan các phương tiện cũng như các chuyến đi. Nhóm JavaScript Thư viện theo dõi chứa thành phần bản đồ JavaScript là một trình đơn thả xuống thay thế cho một thực thể google.maps.Map tiêu chuẩn và các thành phần dữ liệu thành kết nối với Fleet Engine.

Thành phần

Thư viện theo dõi nhóm JavaScript cung cấp các thành phần để trực quan hoá xe và điểm tham chiếu chuyến đi, cũng như nguồn cấp dữ liệu thô cho giờ đến dự kiến hoặc điểm tham chiếu còn lại khoảng cách đến một chuyến đi.

Chế độ xem bản đồ Theo dõi đội phương tiện vận chuyển

Thành phần chế độ xem bản đồ Theo dõi đội phương tiện trực quan hoá vị trí của xe và các điểm tham chiếu của chuyến đi. Nếu đã biết tuyến đường của xe, thì thành phần chế độ xem bản đồ tạo hiệu ứng cho chiếc xe đó khi nó di chuyển dọc theo đường đi dự kiến.

Chế độ xem bản đồ Theo dõi đội phương tiện vận chuyển ví dụ

Nhà cung cấp vị trí

Nhà cung cấp vị trí làm việc với thông tin lưu trữ trong Fleet Engine để gửi vị trí của các đối tượng được theo dõi vào bản đồ chia sẻ hành trình.

Nhà cung cấp vị trí xe

Nhà cung cấp vị trí xe hiển thị thông tin vị trí của một xe. Có thông tin về vị trí của xe và chuyến đi hiện tại được chỉ định cho chiếc xe.

Nhà cung cấp vị trí đội phương tiện vận chuyển

Nhà cung cấp vị trí đội xe hiển thị thông tin vị trí của nhiều xe. Bạn có thể lọc để xem một chiếc xe cụ thể và vị trí của xe, hoặc bạn có thể đăng vị trí xe cho toàn bộ đội xe.

Kiểm soát khả năng hiển thị của các vị trí được theo dõi

Quy tắc về chế độ hiển thị xác định thời điểm hiển thị của một đối tượng vị trí được theo dõi trên Bản đồ cho nhà cung cấp vị trí Fleet Engine. Lưu ý - Sử dụng vị trí tuỳ chỉnh hoặc phái sinh có thể thay đổi các quy tắc hiển thị.

Phương tiện vận tải

Một chiếc xe sẽ xuất hiện ngay sau khi tạo trong Fleet Engine và cũng sẽ xuất hiện khi xe_state là Online. Tức là có thể nhìn thấy một chiếc xe ngay cả khi khi không có chuyến đi hiện tại nào được chỉ định cho xe.

Điểm đánh dấu vị trí điểm tham chiếu

Điểm đánh dấu vị trí điểm tham chiếu cho biết các điểm dọc theo hành trình của phương tiện bắt đầu với điểm khởi hành và kết thúc bằng điểm đến cuối cùng. Vị trí điểm tham chiếu điểm đánh dấu có thể được xác định như sau:

  • Điểm khởi hành – cho biết vị trí bắt đầu của chuyến xe
  • Trung gian – biểu thị điểm dừng của chuyến xe
  • Điểm đến – cho biết vị trí cuối cùng của chuyến đi bằng xe

Trên bản đồ, các điểm tham chiếu phương tiện theo kế hoạch được thể hiện dưới dạng điểm xuất phát, trung gian và trung gian điểm đánh dấu điểm đến.

Bắt đầu với Thư viện theo dõi nhóm JavaScript

Trước khi sử dụng Thư viện theo dõi nhóm JavaScript, hãy đảm bảo rằng bạn đã quen thuộc với Fleet Engine và nhận API . Sau đó, hãy tạo thông tin xác nhận quyền sở hữu mã chuyến đi và mã xe.

Tạo thông tin xác nhận quyền sở hữu mã chuyến đi và mã xe

Để theo dõi xe bằng vị trí của xe , hãy tạo Mã thông báo web JSON (JWT) kèm theo chuyến đi Xác nhận quyền sở hữu mã nhận dạng xe và mã nhận dạng xe.

Để tạo tải trọng JWT, hãy thêm một thông báo xác nhận quyền sở hữu khác vào phần uỷ quyền bằng các khoá tripid và vehicleid rồi đặt value của mỗi khoá thành *. Hệ thống phải tạo mã thông báo này bằng dịch vụ đám mây của Fleet Engine Service Super User Vai trò IAM. Xin lưu ý rằng quyền này sẽ cấp quyền truy cập rộng rãi để tạo, đọc và sửa đổi Nhóm Các thực thể của công cụ (bạn chỉ nên chia sẻ các thực thể này với người dùng đáng tin cậy).

Ví dụ sau đây trình bày cách tạo mã thông báo để theo dõi bằng xe và nhiệm vụ:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Tạo trình tìm nạp mã thông báo xác thực

Thư viện theo dõi nhóm JavaScript yêu cầu một mã thông báo bằng cách sử dụng phương thức xác thực trình tìm nạp mã thông báo khi bất kỳ trường hợp nào sau đây xảy ra:

  • Phương thức này không có mã thông báo hợp lệ, chẳng hạn như khi chưa gọi trình tìm nạp trên tải trang mới hoặc khi trình tìm nạp chưa trả về kèm theo mã thông báo.
  • Mã thông báo mà mã này tìm nạp trước đó đã hết hạn.
  • Mã thông báo mà mã này đã tìm nạp trước đó sẽ hết hạn trong vòng một phút.

Nếu không, thư viện sẽ sử dụng mã thông báo được phát hành trước đó, vẫn hợp lệ và có không gọi trình tìm nạp.

Bạn có thể tạo trình tìm nạp mã xác thực để truy xuất mã thông báo được tạo bằng những khiếu nại thích hợp trên máy chủ của bạn thông qua tài khoản dịch vụ cho dự án của mình. Bạn chỉ nên tạo mã thông báo trên và không bao giờ chia sẻ chứng chỉ của bạn trên bất kỳ ứng dụng khách nào. Nếu không, bạn có thể xâm phạm tính bảo mật của hệ thống của bạn.

Trình tìm nạp phải trả về một dữ liệu cấu trúc có hai trường, được gói trong một Lời hứa:

  • Chuỗi token.
  • Số expiresInSeconds. Mã thông báo sẽ hết hạn trong khoảng thời gian này sau tìm nạp.

Ví dụ sau đây cho thấy cách tạo trình tìm nạp mã thông báo xác thực:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Khi triển khai điểm cuối phía máy chủ để đúc mã thông báo, hãy giữ lại những lưu ý sau:

  • Điểm cuối phải trả về thời gian hết hạn cho mã thông báo; trong ví dụ ở trên, giá trị đó được gán là data.ExpiresInSeconds.
  • Trình tìm nạp mã xác thực phải vượt qua thời gian hết hạn (tính bằng giây, từ thời gian tìm nạp) vào thư viện, như minh hoạ trong ví dụ.
  • SERVER_TOKEN_URL phụ thuộc vào việc triển khai phụ trợ của bạn, đây là URL ví dụ:
    • https://SERVER_URL/token/driver/VEHICLE_ID
    • https://SERVER_URL/token/consumer/TRIP_ID
    • https://SERVER_URL/token/fleet_reader

Tải bản đồ từ HTML

Ví dụ sau cho biết cách tải thư viện Chia sẻ hành trình JavaScript từ một URL đã chỉ định. Tham số callback thực thi hàm initMap sau khi API tải. Thuộc tính defer cho phép trình duyệt tiếp tục kết xuất phần còn lại của trang trong khi API tải.

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

Theo dõi phương tiện

Phần này trình bày cách sử dụng Thư viện theo dõi nhóm JavaScript để theo dõi chiếc xe. Đảm bảo tải thư viện từ hàm callback được chỉ định trong thẻ tập lệnh trước khi chạy mã.

Tạo thực thể cho nhà cung cấp vị trí xe

Thư viện Theo dõi nhóm JavaScript xác định trước trình cung cấp vị trí cho Bật API Đi và giao hàng theo nhu cầu. Sử dụng mã dự án và tệp tham chiếu đến nhà máy mã thông báo để tạo thực thể đó.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Khởi chạy chế độ xem bản đồ

Sau khi tải thư viện Chia sẻ hành trình JavaScript, hãy khởi chạy chế độ xem bản đồ rồi thêm đoạn mã đó vào trang HTML. Trang của bạn phải chứa phần tử &lt;div&gt; chứa chế độ xem bản đồ. Phần tử &lt;div&gt; có tên là &lt;div&gt; trong ví dụ bên dưới.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Theo dõi các sự kiện thay đổi

Bạn có thể truy xuất thông tin siêu dữ liệu về một chiếc xe từ đối tượng vehicle thông qua trình cung cấp vị trí. Thông tin meta bao gồm thời gian đến dự kiến và các thông tin còn lại khoảng cách trước lần đến lấy hàng hoặc trả xe tiếp theo. Thay đổi đối với thẻ meta thông tin kích hoạt sự kiện update. Ví dụ sau đây trình bày cách nghe đối với các sự kiện thay đổi này.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Nghe lỗi

Lỗi phát sinh không đồng bộ khi yêu cầu điều kiện kích hoạt thông tin về xe sự kiện lỗi. Ví dụ sau đây trình bày cách theo dõi những sự kiện này trong để xử lý lỗi.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Dừng theo dõi

Để ngăn nhà cung cấp vị trí theo dõi xe, hãy xoá mã xe từ nhà cung cấp vị trí.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Xoá trình cung cấp vị trí khỏi chế độ xem bản đồ

Ví dụ sau đây minh hoạ cách xoá nhà cung cấp vị trí khỏi chế độ xem bản đồ.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Xem nhóm xe

Phần này cho biết cách sử dụng thư viện Chia sẻ hành trình JavaScript để xem một hệ thống phương tiện. Hãy nhớ tải thư viện từ hàm callback được chỉ định trong thẻ tập lệnh trước khi chạy mã.

Tạo thực thể cho nhà cung cấp vị trí hệ thống xe

Thư viện theo dõi nhóm JavaScript xác định trước nhà cung cấp vị trí tìm nạp nhiều xe qua API Lái xe và giao hàng theo yêu cầu. Sử dụng mã dự án cũng như tham chiếu đến trình tìm nạp mã thông báo để tạo mã dự án đó.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter chỉ định cụm từ tìm kiếm dùng để lọc các phương tiện hiển thị trên bản đồ. Bộ lọc này được chuyển trực tiếp đến Fleet Engine. Xem ListVehiclesRequest cho các định dạng được hỗ trợ.

locationRestriction giới hạn khu vực hiển thị phương tiện trên bản đồ. Chính sách này cũng kiểm soát việc tính năng theo dõi vị trí có đang hoạt động hay không. Theo dõi vị trí sẽ không bắt đầu cho đến khi bạn đặt chế độ này.

Sau khi xây dựng xong trình cung cấp vị trí, hãy khởi chạy bản đồ .

Đặt hạn chế vị trí bằng cách sử dụng chế độ xem bản đồ

Bạn có thể định cấu hình ranh giới locationRestriction sao cho khớp với khu vực hiển thị trong chế độ xem bản đồ.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Theo dõi các sự kiện thay đổi

Bạn có thể truy xuất thông tin siêu dữ liệu về nhóm thiết bị qua đối tượng vehicles thông qua trình cung cấp vị trí. Thông tin meta bao gồm các thuộc tính của xe chẳng hạn như trạng thái di chuyển, khoảng cách đến điểm tham chiếu tiếp theo và các thuộc tính tuỳ chỉnh; xem tham chiếu tài liệu để biết thêm chi tiết. Việc thay đổi thông tin meta sẽ kích hoạt một sự kiện cập nhật. Chiến lược phát hành đĩa đơn ví dụ sau đây cho thấy cách theo dõi những sự kiện thay đổi này.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Nghe lỗi

Lỗi phát sinh không đồng bộ khi yêu cầu thông tin về nhóm xe kích hoạt các sự kiện lỗi. Để xem các ví dụ minh hoạ cách theo dõi những sự kiện này, hãy tham khảo để Nghe lỗi.

Dừng theo dõi

Để ngăn nhà cung cấp vị trí theo dõi nhóm thiết bị, hãy đặt các giới hạn cho nhà cung cấp vị trí thành giá trị rỗng.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Xoá trình cung cấp vị trí khỏi chế độ xem bản đồ

Ví dụ sau đây minh hoạ cách xoá nhà cung cấp vị trí khỏi chế độ xem bản đồ.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Tuỳ chỉnh giao diện của bản đồ cơ sở

Để tuỳ chỉnh giao diện của thành phần bản đồ, hãy tạo kiểu cho ánh xạ bằng công cụ trên đám mây hoặc bằng cách thiết lập các tuỳ chọn trực tiếp trong mã.

Sử dụng kiểu bản đồ dựa trên đám mây

Định kiểu bản đồ trên đám mây cho phép bạn tạo và chỉnh sửa kiểu bản đồ cho bất kỳ ứng dụng nào sử dụng Google Maps từ bảng điều khiển Google Cloud mà không yêu cầu thay đổi mã. Chiến lược phát hành đĩa đơn kiểu bản đồ được lưu dưới dạng mã bản đồ trong dự án Google Cloud của bạn. Để áp dụng kiểu cho Bản đồ Theo dõi nhóm JavaScript, hãy chỉ định mapId khi bạn tạo JourneySharingMapView. Không thể thay đổi trường mapId hoặc thêm vào sau khi JourneySharingMapView được tạo thực thể. Nội dung sau đây ví dụ cho thấy cách kích hoạt kiểu bản đồ đã tạo trước đó bằng ID bản đồ.

JavaScript

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

TypeScript

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

Sử dụng kiểu bản đồ dựa trên mã

Một cách khác để tuỳ chỉnh kiểu bản đồ là đặt mapOptions khi bạn tạo JourneySharingMapView.

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" }
        ]
      }
    ]
  }
});

Sử dụng các chế độ tuỳ chỉnh điểm đánh dấu

Với Thư viện theo dõi nhóm JavaScript, bạn có thể tuỳ chỉnh giao diện của điểm đánh dấu được thêm vào bản đồ. Bạn thực hiện việc này bằng cách chỉ định các tuỳ chỉnh điểm đánh dấu, mà Thư viện theo dõi đội tàu sẽ áp dụng trước khi thêm điểm đánh dấu vào bản đồ và với mỗi lần cập nhật điểm đánh dấu.

Bạn có thể tạo một tuỳ chỉnh đơn giản bằng cách chỉ định MarkerOptions để áp dụng cho tất cả các điểm đánh dấu cùng loại. Những thay đổi được chỉ định trong được áp dụng sau khi mỗi điểm đánh dấu đã được tạo, ghi đè mọi giá trị mặc định .

Bạn có thể chỉ định chức năng tuỳ chỉnh là tuỳ chọn nâng cao hơn. Các hàm tùy chỉnh cũng cho phép tạo kiểu cho điểm đánh dấu dựa trên dữ liệu chẳng hạn như thêm tính tương tác vào các điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Cụ thể, Fleet Tính năng theo dõi truyền dữ liệu sang hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu biểu thị: xe cộ, trạm dừng hoặc nhiệm vụ. Sau đó, thao tác này cho phép định kiểu điểm đánh dấu thay đổi dựa trên trạng thái hiện tại của chính phần tử đánh dấu; Ví dụ: số điểm dừng hoặc loại tác vụ còn lại. Bạn thậm chí có thể kết hợp dựa trên dữ liệu từ nguồn bên ngoài Fleet Engine và tạo kiểu cho điểm đánh dấu dựa trên thông tin đó.

Ngoài ra, bạn có thể sử dụng các chức năng tuỳ chỉnh để lọc chế độ hiển thị của điểm đánh dấu. Để thực hiện việc này, hãy gọi setVisible(false) trên điểm đánh dấu.

Tuy nhiên, vì lý do hiệu suất, bạn nên lọc theo kiểu gốc lọc trong trình cung cấp vị trí, chẳng hạn như FleetEngineFleetLocationProvider.vehicleFilter. Điều đó có nghĩa là khi cần thêm chức năng lọc, bạn có thể áp dụng bằng cách sử dụng chức năng tuỳ chỉnh.

Thư viện Theo dõi nhóm cung cấp các thông số tuỳ chỉnh sau:

Thay đổi kiểu của điểm đánh dấu bằ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 một Đối tượng MarkerOptions. Làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ bằng cách sử dụng bất kỳ thông số tuỳ chỉnh điểm đánh dấu nào được liệt kê ở trên.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Thay đổi kiểu điểm đánh dấu bằng cách sử dụng các hàm tuỳ chỉnh

Ví dụ sau đây cho thấy cách thiết lập kiểu của điểm đánh dấu xe. Theo dõi mẫu này để tuỳ chỉnh kiểu của điểm đánh dấu bằng cách sử dụng điểm đánh dấu bất kỳ tham số tuỳ chỉnh được liệt kê ở trên.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Thêm thao tác nhấp chuột vào điểm đánh dấu

Ví dụ sau đây trình bày cách thêm thao tác nhấp vào điểm đánh dấu xe. Thực hiện theo mẫu này để thêm xử lý nhấp chuột vào bất kỳ điểm đánh dấu nào bằng cách sử dụng bất kỳ điểm đánh dấu nào tham số tuỳ chỉnh được liệt kê ở trên.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Lọc các điểm đánh dấu có thể nhìn thấy

Ví dụ sau đây cho thấy cách lọc các điểm đánh dấu xe hiển thị. Làm theo mẫu này để lọc bất kỳ điểm đánh dấu nào bằng cách sử dụng các tuỳ chỉnh điểm đánh dấu các tham số được liệt kê ở trên.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Dùng cách tuỳ chỉnh hình nhiều đường khi đi theo xe

Với Thư viện theo dõi nhóm, bạn cũng có thể tuỳ chỉnh giao diện của tuyến đường của xe bị theo dõi trên bản đồ. Thư viện sẽ tạo một google.maps.Polyline đối tượng cho từng cặp toạ độ trong trạng thái hoạt động hoặc còn lại của xe path. Bạn có thể tạo kiểu cho các đối tượng Polyline bằng cách chỉ định cách tuỳ chỉnh hình nhiều đường. Chiến lược phát hành đĩa đơn thì sẽ áp dụng các tuỳ chỉnh này trong hai trường hợp: trước khi thêm đối tượng vào bản đồ và thời điểm dữ liệu được sử dụng cho đối tượng đã thay đổi.

Tương tự như tuỳ chỉnh điểm đánh dấu, bạn có thể chỉ định một tập hợp PolylineOptions được áp dụng cho tất cả đối tượng Polyline phù hợp khi chúng được tạo hoặc cập nhật.

Tương tự, bạn có thể chỉ định một hàm tuỳ chỉnh. Chức năng tuỳ chỉnh cho phép tạo kiểu riêng cho các đối tượng dựa trên dữ liệu do Fleet Engine gửi. Hàm này có thể thay đổi kiểu của từng đối tượng dựa trên trạng thái hiện tại của chiếc xe; ví dụ: tô màu cho đối tượng Polyline thành bóng đậm hơn hoặc làm cho lớp phủ dày hơn khi xe di chuyển chậm hơn. Bạn thậm chí có thể tham gia với từ các nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượng Polyline dựa trên đó của bạn.

Bạn có thể chỉ định các tuỳ chỉnh bằng cách sử dụng các thông số được cung cấp trong FleetEngineVehicleLocationProviderOptions. Bạn có thể thiết lập chế độ tuỳ chỉnh cho nhiều trạng thái lộ trình trong hành trình--đã đi du lịch, đang chủ động đi du lịch hoặc chưa đi du lịch. Chiến lược phát hành đĩa đơn các thông số như sau:

Thay đổi kiểu của các đối tượng Polyline bằng PolylineOptions

Ví dụ sau đây cho biết cách định cấu hình định kiểu cho một đối tượng Polyline thông qua tính năng PolylineOptions. Làm theo mẫu này để tuỳ chỉnh kiểu của mọi đối tượng Polyline bằng cách sử dụng bất kỳ trong số các cách tuỳ chỉnh hình nhiều đường được liệt kê trước đó.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Thay đổi kiểu của các đối tượng Polyline bằng các hàm tuỳ chỉnh

Ví dụ sau đây trình bày cách định cấu hình một đối tượng Polyline đang hoạt động tạo kiểu. Làm theo mẫu này để tuỳ chỉnh kiểu của mọi đối tượng Polyline bằng cách sử dụng bất kỳ thông số tuỳ chỉnh hình nhiều đường được liệt kê trước đó.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Kiểm soát chế độ hiển thị của các đối tượng Polyline

Theo mặc định, tất cả đối tượng Polyline đều hiển thị. Cách tạo đối tượng Polyline ẩn, đặt visible thuộc tính:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Kết xuất các đối tượng Polyline nhận biết lưu lượng truy cập

Fleet Engine trả về dữ liệu tốc độ giao thông cho đường dẫn đang hoạt động và đường dẫn còn lại cho chiếc xe bị đuổi theo. Bạn có thể sử dụng thông tin này để tạo kiểu cho Polyline theo tốc độ lưu lượng truy cập của chúng:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Hiển thị InfoWindow cho điểm đánh dấu xe hoặc vị trí

Bạn có thể sử dụng InfoWindow để hiển thị thông tin bổ sung về xe cộ hoặc điểm đánh dấu vị trí.

Ví dụ sau đây cho biết cách tạo 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});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 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});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

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

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

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,
  ...
});

Thay thế bản đồ hiện có

Bạn có thể thay thế một bản đồ hiện có bao gồm các điểm đánh dấu hoặc các tuỳ chỉnh khác mà không mất đi những tuỳ chỉnh đó.

Ví dụ: giả sử bạn có trang web có google.maps.Map chuẩn thực thể nơi một điểm đánh dấu được hiển thị:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

Cách thêm thư viện Chia sẻ hành trình JavaScript, trong đó có tính năng Theo dõi nhóm thiết bị:

  1. Thêm mã cho nhà máy mã thông báo xác thực.
  2. Khởi chạy trình cung cấp vị trí trong hàm initMap().
  3. Khởi động chế độ xem bản đồ trong hàm initMap(). Chế độ xem chứa bản đồ.
  4. Chuyển chế độ tuỳ chỉnh của bạn vào hàm callback cho chế độ xem bản đồ khởi tạo.
  5. Thêm thư viện vị trí vào trình tải API.

Ví dụ sau đây cho thấy các thay đổi sẽ được thực hiện:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

Nếu bạn vận hành một chiếc xe với ID được chỉ định ở gần Oracle Park, ID sẽ hiển thị trên bản đồ.