Thư viện theo dõi hạm đội JavaScript cho phép bạn hình dung các vị trí của các phương tiện trong đội tàu của họ trong thời gian gần. Thư viện sử dụng API giao hàng để cho phép trực quan hóa các phương tiện giao hàng cũng như các nhiệm vụ. Giống như thư viện theo dõi lô hàng JavaScript, nó chứa một thành phần bản đồ JavaScript là một sự thay thế thả vào cho một thực thể <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 4 tiêu chuẩn và các thành phần dữ liệu để kết nối với động cơ đội tàu.
Các thành phần
Thư viện theo dõi đội tàu JavaScript cung cấp các thành phần để trực quan hóa các phương tiện giao hàng và điểm dừng, cũng như nguồn cấp dữ liệu thô cho ETA hoặc khoảng cách còn lại đến giao hàng.
Chế độ xem bản đồ theo dõi đội tàu
Thành phần xem bản đồ theo dõi hạm đội hình dung vị trí của phương tiện và nhiệm vụ. Nếu tuyến đường cho một chiếc xe được biết đến, thành phần Map View hoạt hình chiếc xe đó khi nó di chuyển dọc theo con đường dự đoán của nó.
Nhà cung cấp vị trí
Các nhà cung cấp vị trí làm việc với thông tin được lưu trữ trong động cơ đội tàu để gửi thông tin vị trí cho 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 giao hàng
Nhà cung cấp vị trí xe giao hàng hiển thị thông tin vị trí của một phương tiện giao hàng. Nó có thông tin về vị trí xe cũng như các nhiệm vụ được hoàn thành bởi xe giao hàng.
Nhà cung cấp vị trí đội tàu giao hàng
Nhà cung cấp vị trí đội tàu giao hàng hiển thị thông tin vị trí của nhiều phương tiện. Bạn có thể lọc cho các phương tiện hoặc địa điểm cụ thể, hoặc bạn có thể hiển thị toàn bộ hạm đội.
Kiểm soát khả năng 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 các đối tượng vị trí được theo dõi trên bản đồ cho nhà cung cấp vị trí được xác định trước của Động cơ Hạm đội. Các nhà cung cấp vị trí tùy chỉnh hoặc có nguồn gốc có thể thay đổi các quy tắc hiển thị.
Xe phân phối
Một chiếc xe giao hàng có thể nhìn thấy ngay khi nó được tạo ra trong động cơ Hạm đội, và có thể nhìn thấy trên khắp tuyến đường của nó bất kể nhiệm vụ của nó.
Điểm đánh dấu vị trí nhiệm vụ
Các điểm dừng xe theo kế hoạch được hiển thị trên bản đồ dưới dạng điểm dừng xe. Các điểm đánh dấu cho các nhiệm vụ đã hoàn thành được hiển thị với một phong cách khác với các điểm dừng theo kế hoạch của xe.
Vị trí của kết quả nhiệm vụ được hiển thị với các dấu hiệu kết quả nhiệm vụ. Các nhiệm vụ có kết quả thành công được hiển thị với các dấu hiệu nhiệm vụ thành công, trong khi tất cả các tác vụ khác được hiển thị với các dấu hiệu nhiệm vụ không thành công.
Bắt đầu với Thư viện theo dõi hạm đội JavaScript
Trước khi sử dụng thư viện theo dõi hạm đội JavaScript, hãy chắc chắn rằng bạn đã quen thuộc với Động cơ Hạm đội và với khóa API. Sau đó tạo một ID nhiệm vụ và yêu cầu ID xe giao hàng.
Tạo một ID nhiệm vụ và yêu cầu ID xe giao hàng
Để theo dõi các phương tiện giao hàng bằng cách sử dụng nhà cung cấp vị trí xe giao hàng, hãy tạo mã thông báo JSON Web (JWT) bằng ID nhiệm vụ và yêu cầu ID xe giao hàng.
Để tạo tải trọng JWT, hãy thêm yêu cầu bổ sung trong phần ủy quyền với các khóa taskId và DeliverveHicleId và đặt giá trị của mỗi khóa thành *. Mã thông báo nên được tạo bằng cách sử dụng vai trò siêu người dùng IAM dịch vụ động cơ Fleet Engine. Lưu ý rằng điều này cấp quyền truy cập rộng rãi để tạo, đọc và sửa đổi các thực thể động cơ đội tàu và chỉ nên được chia sẻ với người dùng đáng tin cậy.
Ví dụ sau đây cho thấy cách tạo mã thông báo để theo dõi bằng phương tiện và nhiệm vụ:
{ "alg": "RS256", "typ": "JWT", "kid": "private_key_id_of_consumer_service_account" } . { "iss": "", "sub": "", "aud": "//fleetengine.googleapis.com/", "iat": 1511900000, "exp": 1511903600, "scope": "//www.googleapis.com/auth/xapi", "authorization": { "taskid": "*", "deliveryvehicleid": "*", } }Tạo một mã tìm kiếm mã thông báo xác thực
Bạn có thể tạo một mã thông báo xác thực để truy xuất mã thông báo được đúc bằng các khiếu nại phù hợp trên máy chủ của bạn bằng chứng chỉ tài khoản dịch vụ cho dự án của bạn. Điều quan trọng là chỉ có mã thông báo Mint 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ỳ khách hàng nào. Nếu không, bạn sẽ thỏa hiệp bảo mật hệ thống của bạn.
Ví dụ sau đây cho thấy cách tạo Trình giả bộ 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
};
}
TYPEXTRIPT
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.ExpiresInSeconds
};
}
Khi triển khai điểm cuối phía máy chủ để khai thác mã thông báo, hãy ghi nhớ những điề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 đưa ra là <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>
5.
- Trình tìm kiếm mã thông báo xác thực phải chuyển thời gian hết hạn (tính bằng vài giây, theo thời gian phát hành) cho thư viện, như trong ví dụ.
Tải bản đồ từ HTML
Ví dụ sau đây cho thấy cách tải thư viện chia sẻ hành trình JavaScript từ một URL được chỉ định. Tham số gọi lại thực thi hàm <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 6 sau khi tải API. Thuộc tính trì hoãn cho phép trình duyệt tiếp tục hiển thị phần còn lại của trang của bạn trong khi API tải. Lưu ý rằng tham số V = beta phải được chỉ định.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>Theo một chiếc xe giao hàng
Phần này cho thấy cách sử dụng thư viện theo dõi đội tàu JavaScript để theo dõi một chiếc xe giao hàng. Đảm bảo tải thư viện từ chức năng gọi lại được chỉ định trong thẻ tập lệnh trước khi chạy mã của bạn.
Khởi tạo một nhà cung cấp vị trí xe giao hàng
Thư viện theo dõi hạm đội JavaScript xác định trước một nhà cung cấp vị trí cho API phân phối động cơ đội tàu. Sử dụng ID dự án của bạn và tham chiếu đến nhà máy mã thông báo của bạn để khởi tạo nó.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TYPEXTRIPT
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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);
TYPEXTRIPT
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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);
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TYPEXTRIPT
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
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
};
}
0TYPEXTRIPT
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
};
}
1
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
JavaScript
Nghe các sự kiện thay đổi
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
};
}
2TYPEXTRIPT
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
};
}
2
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
JavaScript
Nghe các sự kiện thay đổi
Bạn có thể truy xuất thông tin meta về một tác vụ từ đối tượng <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 7 bằng cách sử dụng nhà cung cấp vị trí. Thông tin meta bao gồm ETA và khoảng cách còn lại trước khi xe bán tải hoặc thả tiếp theo của xe. Thay đổi đối với thông tin meta kích hoạt một sự kiện cập nhật. Ví dụ sau đây cho thấy cách lắng nghe các sự kiện thay đổi này.
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
};
}
4TYPEXTRIPT
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
};
}
4
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
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
};
}
6TYPEXTRIPT
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
};
}
7
Khởi tạo chế độ xem bản đồ
Sau khi tải thư viện chia sẻ hành trình JavaScript, khởi tạo chế độ xem bản đồ và thêm nó vào trang HTML. Trang của bạn nên chứa một phần tử giữ chế độ xem bản đồ. Phần tử được đặt tên là MAP_CANVAS trong ví dụ dưới đây.
JavaScript
Nghe các sự kiện thay đổi
Bạn có thể truy xuất thông tin meta về một tác vụ từ đối tượng <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 7 bằng cách sử dụng nhà cung cấp vị trí. Thông tin meta bao gồm ETA và khoảng cách còn lại trước khi xe bán tải hoặc thả tiếp theo của xe. Thay đổi đối với thông tin meta kích hoạt một sự kiện cập nhật. Ví dụ sau đây cho thấy cách lắng nghe các sự kiện thay đổi này.
Nghe lỗi
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
};
}
8TYPEXTRIPT
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
};
}
8
Nghe các sự kiện thay đổi
Bạn có thể truy xuất thông tin meta về một tác vụ từ đối tượng <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 7 bằng cách sử dụng nhà cung cấp vị trí. Thông tin meta bao gồm ETA và khoảng cách còn lại trước khi xe bán tải hoặc thả tiếp theo của xe. Thay đổi đối với thông tin meta kích hoạt một sự kiện cập nhật. Ví dụ sau đây cho thấy cách lắng nghe các sự kiện thay đổi này.
Nghe lỗi
JavaScript
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.ExpiresInSeconds
};
}
0Nghe các sự kiện thay đổi
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.ExpiresInSeconds
};
}
1
Bạn có thể truy xuất thông tin meta về một tác vụ từ đối tượng <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 7 bằng cách sử dụng nhà cung cấp vị trí. Thông tin meta bao gồm ETA và khoảng cách còn lại trước khi xe bán tải hoặc thả tiếp theo của xe. Thay đổi đối với thông tin meta kích hoạt một sự kiện cập nhật. Ví dụ sau đây cho thấy cách lắng nghe các sự kiện thay đổi này.
Nghe lỗi
JavaScript
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.ExpiresInSeconds
};
}
2TYPEXTRIPT
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.ExpiresInSeconds
};
}
3
Thay đổi biểu tượng dừng xe (dừng theo kế hoạch)
Bạn có thể sử dụng các tùy chọn kiểu dáng tùy chỉnh để định cấu hình biểu tượng được sử dụng để đại diện cho các vị trí dừng xe, điểm dừng của xe sẽ được hoàn thành. Các tùy chọn kiểu dáng được xác định và gắn vào chế độ xem bản đồ giống như thay đổi các biểu tượng của các điểm đánh dấu xe.
Ví dụ sau đây cho thấy cách định cấu hình biểu tượng vị trí dừng xe.
JavaScript
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.ExpiresInSeconds
};
}
4TYPEXTRIPT
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.ExpiresInSeconds
};
}
5
Thêm điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ
Thực thể <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 4 bao gồm các điều khiển mà người dùng có thể sửa đổi trực tiếp. Bản đồ của bạn có thể được tùy chỉnh để bao gồm các điều khiển cho phép xem vệ tinh và các loại bản đồ khác.
Ví dụ sau đây cho thấy cách thêm các điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ.
JavaScript
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.ExpiresInSeconds
};
}
6TYPEXTRIPT
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.ExpiresInSeconds
};
}
6
Thêm điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ
Thực thể <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 4 bao gồm các điều khiển mà người dùng có thể sửa đổi trực tiếp. Bản đồ của bạn có thể được tùy chỉnh để bao gồm các điều khiển cho phép xem vệ tinh và các loại bản đồ khác.
Ví dụ sau đây cho thấy cách thêm các điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ.
JavaScript
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.ExpiresInSeconds
};
}
8TYPEXTRIPT
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.ExpiresInSeconds
};
}
9
Thêm điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ
Thực thể <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 4 bao gồm các điều khiển mà người dùng có thể sửa đổi trực tiếp. Bản đồ của bạn có thể được tùy chỉnh để bao gồm các điều khiển cho phép xem vệ tinh và các loại bản đồ khác.
JavaScript
Ví dụ sau đây cho thấy cách thêm các điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ.TYPEXTRIPT
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>
0
Thêm điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ
Thực thể <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 4 bao gồm các điều khiển mà người dùng có thể sửa đổi trực tiếp. Bản đồ của bạn có thể được tùy chỉnh để bao gồm các điều khiển cho phép xem vệ tinh và các loại bản đồ khác.
Ví dụ sau đây cho thấy cách thêm các điều khiển chế độ xem vệ tinh vào chế độ xem bản đồ.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 2Hiển thị locationProvider = new google.maps.journeySharing .FleetEngineDeliveryVehicleLocationProvider({ projectId, authTokenFetcher, // Optionally, you may specify // deliveryVehicleId to immediately start // tracking. deliveryVehicleId: 'your-delivery-id', }); 1 cho một điểm đánh dấu xe hoặc vị trí
- Bạn có thể sử dụng locationProvider = new google.maps.journeySharing .FleetEngineDeliveryVehicleLocationProvider({ projectId, authTokenFetcher, // Optionally, you may specify // deliveryVehicleId to immediately start // tracking. deliveryVehicleId: 'your-delivery-id', }); 1 để hiển thị thông tin bổ sung về đánh dấu xe hoặc vị trí.
- Ví dụ sau đây cho thấy cách tạo locationProvider = new google.maps.journeySharing .FleetEngineDeliveryVehicleLocationProvider({ projectId, authTokenFetcher, // Optionally, you may specify // deliveryVehicleId to immediately start // tracking. deliveryVehicleId: 'your-delivery-id', }); 1 và gắn nó vào điểm đánh dấu xe.
- Vô hiệu hóa phù hợp tự động
- Bạn có thể ngăn bản đồ tự động lắp chế độ xem vào xe và tuyến đường dự đoán bằng cách vô hiệu hóa phù hợp tự động. Ví dụ sau đây cho thấy cách vô hiệu hóa phù hợp tự động khi bạn định cấu hình chế độ xem bản đồ chia sẻ hành trình.
- <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 0
Thay thế một bản đồ hiện có
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script> 3Bạ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 tùy chỉnh khác mà không mất các tùy chỉnh đó.