Khi bạn chia sẻ một hành trình, ứng dụng dành cho người tiêu dùng của bạn sẽ hiển thị vị trí của phương tiện phù hợp cho người tiêu dùng. Để làm việc này, ứng dụng của bạn cần bắt đầu chia sẻ hành trình, cập nhật tiến trình của hành trình trong suốt chuyến đi và ngừng chia sẻ hành trình khi chuyến đi kết thúc.
Tài liệu này bao gồm các bước chính sau đây trong quy trình này:
- Thiết lập bản đồ
- Khởi chạy bản đồ và hiển thị hành trình được chia sẻ
- Cập nhật và theo dõi tiến trình của chuyến đi
- Ngừng chia sẻ hành trình
- Xử lý lỗi chia sẻ hành trình
Thiết lập bản đồ
Để theo dõi việc đến lấy hàng hoặc giao hàng trong ứng dụng web, bạn cần tải một bản đồ và tạo SDK tiêu dùng để bắt đầu theo dõi hành trình của bạn. Bạn có thể tải bản đồ mới hoặc sử dụng bản đồ hiện có. Sau đó, bạn sử dụng phương thức khởi tạo để tạo SDK người tiêu dùng để chế độ xem bản đồ tương ứng với vị trí của mặt hàng đang được theo dõi.
Tải bản đồ mới bằng cách sử dụng API JavaScript của Google Maps
Để tạo bản đồ mới, hãy tải API JavaScript của Google Maps trong ứng dụng web của bạn. Chiến lược phát hành đĩa đơn ví dụ sau cho biết cách tải API JavaScript của Google Maps, bật SDK và kích hoạt quá trình kiểm tra việc khởi chạy.
- Tham số
callbacksẽ chạy hàminitMapsau khi API tải. - Thuộc tính
defercho phép trình duyệt tiếp tục hiển thị phần còn lại của trong khi API tải.
Dùng hàm initMap để tạo SDK người tiêu dùng. Ví dụ:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Tải bản đồ hiện có
Bạn cũng có thể tải bản đồ hiện có được tạo bằng API JavaScript của Google Maps, chẳng hạn như tài khoản bạn đang sử dụng.
Ví dụ: giả sử bạn có trang web có google.maps.Map chuẩn
thực thể trên đó một điểm đánh dấu được hiển thị như được xác định trong mã HTML sau. Chiến dịch này
hiển thị bản đồ của bạn bằng cách sử dụng cùng một hàm initMap trong lệnh gọi lại ở cuối:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
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ụ: nếu bạn có trang web có google.maps.Map chuẩn
thực thể có một điểm đánh dấu được hiển thị trên đó, bạn có thể thay thế bản đồ và giữ lại
điểm đánh dấu. Phần này mô tả các bước thực hiện.
Để thay thế bản đồ và duy trì các chế độ tuỳ chỉnh, hãy thêm tính năng chia sẻ hành trình vào trang HTML của bạn bằng cách làm theo các bước sau, bước này cũng được đánh số trong ví dụ sau:
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 cho chế độ xem bản đồ khởi tạo.
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. Nếu bạn điều hành chuyến đi bằng mã nhận dạng được chỉ định ở gần Uluru, giờ đây mã này sẽ hiển thị trên bả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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
Khởi chạy bản đồ và hiển thị hành trình được chia sẻ
Khi một chuyến đi bắt đầu, ứng dụng của bạn cần tạo thực thể cho nhà cung cấp vị trí chuyến đi rồi khởi chạy một bản đồ để bắt đầu chia sẻ hành trình. Xem các phần sau đây để có các ví dụ.
Tạo thực thể cho nhà cung cấp vị trí chuyến đi
SDK JavaScript có trình cung cấp vị trí được xác định trước 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: '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',
});
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 giữ chế độ xem bản đồ. Phần tử <div>
có tên là map_canvas trong ví dụ sau.
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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Cập nhật và theo dõi tiến trình của chuyến đi
Ứng dụng của bạn phải theo dõi các sự kiện và cập nhật tiến trình chuyến đi dưới dạng một hành trình tiếp tục. 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 minh hoạ cách nghe những thay đổi sự kiện.
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);
});
Ngừng chia sẻ hành trình
Khi chuyến đi kết thúc, bạn cần phải dừng nhà cung cấp vị trí theo dõi . Để làm việc này, hãy xoá mã chuyến đi và nhà cung cấp vị trí. Xem các phần sau để biết ví dụ.
Hãy xoá mã chuyến đi khỏi nhà cung cấp vị trí
Ví dụ sau đây trình bày cách xoá mã chuyến đi khỏi 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);
Xử lý lỗi chia sẻ hành trình
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);
});