Giải pháp Gọi xe và Giao hàng theo yêu cầu hiện chỉ dành cho một số đối tác.

Trang này được dịch bởi Cloud Translation API.

Bắt đầu với SDK người tiêu dùng cho JavaScript

SDK JavaScript cho phép bạn trực quan hoá vị trí xe và vị trí quan tâm được theo dõi trong Fleet Engine. Thư viện chứa thành phần bản đồ JavaScript là một thành phần thay thế để một thực thể google.maps.Map chuẩn và các thành phần dữ liệu kết nối nhờ Fleet Engine. Bằng cách sử dụng SDK JavaScript, bạn có thể cung cấp trải nghiệm chuyến đi có thể tùy chỉnh, sử dụng ảnh động và tiến trình đặt hàng từ ứng dụng web của mình.

Thành phần

SDK JavaScript cung cấp các thành phần để trực quan hoá về phương tiện và điểm tham chiếu, cũng như nguồn cấp dữ liệu thô cho giờ đến dự kiến của người lái xe hoặc quãng đường còn lại để lái xe.

Chế độ xem bản đồ về Tiến trình đặt hàng và chuyến đi

Thành phần chế độ xem bản đồ trực quan hoá vị trí của xe và điểm tham chiếu. Nếu xác định được tuyến đường của xe, thành phần chế độ xem bản đồ sẽ tạo ảnh động chiếc xe đó khi nó di chuyển dọc theo đường đi được dự đoán.

Nhà cung cấp vị trí chuyến đi

SDK JavaScript bao gồm vị trí chuyến đi cung cấp thông tin vị trí cho các đối tượng được theo dõi vào bản đồ tiến trình chuyến đi và đơn đặt hàng.

Bạn có thể sử dụng nhà cung cấp vị trí chuyến đi để theo dõi:

Vị trí đón hoặc trả xe của một chuyến đi.
Vị trí và tuyến đường của xe được chỉ định cho chuyến đi.

Đối tượng vị trí được theo dõi

Nhà cung cấp vị trí theo dõi vị trí của các đối tượng như điểm tham chiếu và xe cộ.

Vị trí điểm khởi hành

Vị trí khởi hành là nơi bắt đầu một hành trình. Chiến dịch này đánh dấu vị trí đến lấy hàng.

Vị trí điểm đến

Vị trí đến là vị trí kết thúc một hành trình. Cột này đánh dấu vị trí trả xe.

Vị trí điểm tham chiếu

Vị trí điểm tham chiếu là một vị trí bất kỳ dọc theo tuyến đường của một hành trình được theo dõi. Ví dụ: mỗi điểm dừng trên tuyến đường xe buýt là một vị trí tham chiếu.

Vị trí xe

Vị trí của xe là vị trí được theo dõi của một chiếc xe. Có thể tuỳ ý thêm một tuyến đường cho xe.

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

Để kiểm soát quyền truy cập vào dữ liệu vị trí lưu trữ trong Fleet Engine, bạn phải triển khai dịch vụ đúc mã thông báo web JSON (JWT) cho Fleet Engine trên máy chủ của bạn. Sau đó, triển khai trình tìm nạp mã thông báo xác thực dưới dạng một phần của ứng dụng web bằng JavaScript SDK để xác thực quyền truy cập vào dữ liệu vị trí.

Lựa chọn tạo kiểu

Kiểu điểm đánh dấu và hình nhiều đường xác định giao diện của đối tượng vị trí đã theo dõi trên bản đồ. Bạn có thể sử dụng các tuỳ chọn tạo kiểu tuỳ chỉnh để thay đổi kiểu mặc định cho phù hợp với kiểu của ứng dụng web.

Kiểm soát chế độ hiển thị của các vị trí được theo dõi

Phần này mô tả các quy tắc hiển thị cho đối tượng vị trí được theo dõi trên bản đồ dành cho các nhà cung cấp vị trí được xác định trước của Fleet Engine. Tuỳ chỉnh hoặc bắt nguồn nhà cung cấp vị trí có thể thay đổi quy tắc hiển thị.

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

Xe đi chung có thể nhìn thấy kể từ thời điểm xe được chỉ định cho một chuyến đi đến thời điểm trả khách. Nếu chuyến đi bị huỷ, xe sẽ nhìn thấy lâu hơn.

Tất cả các điểm đánh dấu vị trí khác

Tất cả các điểm đánh dấu vị trí khác cho điểm xuất phát, điểm đến và điểm tham chiếu luôn hiển thị trên bản đồ. Ví dụ: vị trí trả xe chung hoặc địa điểm giao hàng luôn hiển thị trên bản đồ, bất kể về trạng thái của chuyến đi hoặc việc giao hàng.

Bắt đầu sử dụng SDK JavaScript

Trước khi sử dụng SDK JavaScript, đảm bảo bạn quen thuộc với Fleet Engine và bằng cách nhận khoá API.

Để theo dõi chuyến đi chung xe, trước tiên hãy tạo một xác nhận quyền sở hữu mã chuyến đi.

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

Để theo dõi chuyến đi bằng nhà cung cấp vị trí chuyến đi, tạo Mã thông báo web JSON (JWT) với thông báo xác nhận quyền sở hữu mã chuyến đi.

Để 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 khoá tripid và đặt giá trị của khoá đó thành mã chuyến đi.

Ví dụ sau đây trình bày cách tạo mã thông báo để theo dõi theo mã chuyến đi:

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

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

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

Trình tìm nạp phải trả về một cấu trúc dữ liệu 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.

JavaScript Consumer SDK yêu cầu một mã thông báo thông qua mã thông báo xác thực 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, SDK sẽ sử dụng mã thông báo được phát hành trước đó, vẫn hợp lệ và không gọi trình 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

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - 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, nó được gán là data.ExpiresInSeconds.
Trình tìm nạp mã thông báo 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 điểm tìm nạp) vào thư viện, như được thể hiện trong ví dụ.
SERVER_TOKEN_URL tùy thuộc vào việc triển khai của nhà cung cấp của bạn, sau đây là các URL cho nhà cung cấp mẫu:
- https://SERVER_URL/token/driver/VEHICLEID
- https://SERVER_URL/token/consumer/TRIPID

Tải bản đồ từ HTML

Ví dụ sau cho biết cách tải SDK JavaScript từ một URL đã chỉ định. Tham số callback thực thi initMap sau khi API tải. Thuộc tính defer cho phép trình duyệt tiếp tục hiển thị 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" defer></script>

Sau một chuyến đi

Phần này trình bày cách sử dụng SDK JavaScript để theo dõi một chuyến đi chung xe hoặc chuyến giao hàng. 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í chuyến đi

SDK JavaScript xác định trước trình cung cấp vị trí cho API Chia sẻ chuyến đi bằng Fleet Engine. Sử dụng mã dự án của bạn và tham chiếu đến nhà máy mã thông báo của bạn để tạo thực thể.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

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

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

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

Sau khi tải SDK JavaScript, hãy khởi chạy chế độ xem bản đồ rồi thêm vào trang HTML. Trang của bạn nên có phần tử <div> lưu chế độ xem bản đồ. Phần tử <div> có tên là map_canvas trong ví dụ bên dưới.

Để tránh điều kiện tranh đấu, hãy đặt mã chuyến đi cho nhà cung cấp vị trí trong lệnh gọi lại được gọi sau khi bản đồ được khởi chạy.

JavaScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

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

Bạn có thể truy xuất thông tin meta về một chuyến đi từ đối tượng tác vụ 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à quãng đường còn lại trước khi đến lấy hàng hoặc trả xe. Các thay đổi đối với siêu thông tin kích hoạt sự kiện update. 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.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

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

Xử lý 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 chuyến đi sự kiện lỗi. Ví dụ sau đây minh hoạ cách theo dõi những sự kiện này để xử lý lỗi.

JavaScript

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

TypeScript

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

Lưu ý: Hãy nhớ gói các lệnh gọi thư viện trong khối try...catch để xử lý các lỗi ngoài dự kiến.

Dừng theo dõi

Để ngăn nhà cung cấp vị trí theo dõi chuyến đi, hãy xoá mã chuyến đi khỏi trình cung cấp vị trí.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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 đồ, tạo kiểu cho bản đồ 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ã của bạn. Kiểu bản đồ được lưu dưới dạng mã bản đồ trong dự án trên Google Cloud của bạn. Người nhận áp dụng một kiểu cho bản đồ SDK JavaScript của bạn, hãy chỉ định mapId và bất kỳ mapOptions nào khác 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 cho thấy cách kích hoạt kiểu bản đồ đã tạo trước đó 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'
  }
  // and any other styling options.
});

TypeScript

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

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 SDK 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 làm điều này bằng cách chỉ định các tuỳ chỉnh điểm đánh dấu mà Sau đó, SDK JavaScript sẽ áp dụng trước khi thêm điểm đánh dấu vào bản đồ và với mỗi cập nhật điểm đánh dấu.

Cách tuỳ chỉnh đơn giản nhất là chỉ định một MarkerOptions đối tượng sẽ được áp dụng cho tất cả các điểm đánh dấu cùng loại. Các thay đổi được chỉ định trong đối tượng sẽ được áp dụng sau khi tạo mỗi điểm đánh dấu. ghi đè bất kỳ tuỳ chọn mặc định nào.

Lựa chọn nâng cao hơn là chỉ định một hàm tuỳ chỉnh. Tuỳ chỉnh cho phép định kiểu điểm đánh dấu dựa trên dữ liệu, cũng như thêm tương tác với các điểm đánh dấu, chẳng hạn như xử lý nhấp chuột. Cụ thể, Chuyến đi và Đơn đặt hàng Tiến trình 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ộ, điểm xuất phát, điểm tham chiếu hoặc điểm đến. Sau đó, thao tác này cho phép kiểu điểm đánh dấu cần thay đổi theo trạng thái hiện tại của phần tử điểm đánh dấu chính nó; ví dụ: số điểm tham chiếu còn lại cho đến khi xe chạy xong chuyến đi đó. Bạn thậm chí có thể kết hợp dựa trên dữ liệu từ các 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 đó.

SDK JavaScript cung cấp các thông số tuỳ chỉnh sau trong FleetEngineTripLocationProviderOptions:

Thay đổi kiểu của điểm đánh dấu bằng `MarkerOptions`

Ví dụ sau đây cho thấy cách thiết lập kiểu của điểm đánh dấu xe bằng đối tượng MarkerOptions. Làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ điểm đánh dấu bằng bất kỳ tuỳ chỉnh điểm đánh dấu nào được liệt kê trước đó.

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ước đó.

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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ước đó.

JavaScript

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

TypeScript

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

Sử dụng chế độ tuỳ chỉnh hình nhiều đường

Với SDK JavaScript, bạn cũng có thể tuỳ chỉnh giao diện của chuyến đi tuyến đường 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 đường dẫn. 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 FleetEngineTripLocationProviderOptions. 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:

takenPolylineCustomization! cho một lộ trình đã đi;
activePolylineCustomization! cho tuyến đường chủ động di chuyển;
remainingPolylineCustomization! cho một lộ trình chưa được di chuyển.

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.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        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 =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        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 điểm đánh dấu xe:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 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 thiết lập chuyến đi và thứ tự chế độ xem bản đồ tiến 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,
  ...
});

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

Bạn có thể sử dụng SDK JavaScript để 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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, 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 SDK JavaScript:

Thêm mã cho nhà máy mã thông báo xác thực.
Khởi chạy trình cung cấp vị trí trong hàm initMap().
Khởi động chế độ xem bản đồ trong hàm initMap(). Chế độ xem chứa bản đồ.
Chuyển chế độ tuỳ chỉnh của bạn vào hàm callback để khởi chạy chế độ xem bản đồ.
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
async 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.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "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
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, 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 SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Nếu bạn điều hành một chuyến đi bằng ID được chỉ định gần Uluru, giờ đây URL này sẽ được hiển thị trên bản đồ.

Bắt đầu với SDK người tiêu dùng cho JavaScript

Thành phần

Chế độ xem bản đồ về Tiến trình đặt hàng và chuyến đi

Nhà cung cấp vị trí chuyến đi

Đối tượng vị trí được theo dõi

Vị trí điểm khởi hành

Vị trí điểm đến

Vị trí điểm tham chiếu

Vị trí xe

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

Lựa chọn tạo kiểu

Kiểm soát chế độ hiển thị của các vị trí được theo dõi

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

Tất cả các điểm đánh dấu vị trí khác

Bắt đầu sử dụng SDK JavaScript

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

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

JavaScript

TypeScript

Tải bản đồ từ HTML

Sau một chuyến đi

Tạo thực thể cho nhà cung cấp vị trí chuyến đi

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

Xử lý lỗi

JavaScript

TypeScript

Dừng theo dõi

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

Thay đổi kiểu của điểm đánh dấu bằng MarkerOptions

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

Sử dụng chế độ tuỳ chỉnh hình nhiều đường

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

Thay đổi kiểu của điểm đánh dấu bằng `MarkerOptions`

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

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

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

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

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