SDK JavaScript cho phép bạn minh hoạ vị trí của xe và vị trí quan tâm được theo dõi trong Fleet Engine. Thư viện này chứa một thành phần bản đồ JavaScript thay thế cho thực thể google.maps.Map
tiêu chuẩn và các thành phần dữ liệu để kết nối với Fleet Engine. Khi sử dụng SDK JavaScript, bạn có thể mang đến trải nghiệm có thể tuỳ chỉnh, tuỳ chỉnh cho chuyến đi 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á 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 đã biết tuyến đường của một phương tiện, thành phần chế độ xem bản đồ sẽ tạo ảnh động cho chiếc xe đó khi nó di chuyển dọc theo đường dự đoán.
Nhà cung cấp vị trí chuyến đi
SDK JavaScript bao gồm một trình cung cấp vị trí chuyến đi, giúp đưa 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. Thẻ 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 mình. Sau đó, hãy triển khai trình tìm nạp mã thông báo xác thực trong ứng dụng web của bạn, sử dụng SDK JavaScript để 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í được theo dõi trên bản đồ. Bạn có thể sử dụng các tuỳ chọn định 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 về chế độ hiển thị cho các đố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. Trình cung cấp 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
Bạn có thể nhìn thấy phương tiện đi chung từ thời điểm xe được chỉ định cho một chuyến đi đến thời điểm trả xe. 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ả khách đi chung xe hoặc vị trí giao hàng luôn hiển thị trên bản đồ, bất kể 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, hãy đảm bảo bạn làm quen với Fleet Engine và 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, hãy tạo Mã thông báo web JSON (JWT) có 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 rồi đặt giá trị của khoá đó thành mã chuyến đi.
Ví dụ sau đây cho thấ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ã xác thực để truy xuất mã thông báo được tạo bằng các thông báo xác nhận thích hợp trên máy chủ của mình bằng cách sử dụng chứng chỉ tài khoản dịch vụ cho dự án. Điều quan trọng là bạn chỉ nên đúc mã thông báo trên máy chủ của mình 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 với 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 khi tìm nạp.
JavaScript Consumer SDK yêu cầu một mã thông báo thông qua trình tìm nạp 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 không gọi trình tìm nạp khi tải trang mới hoặc khi trình tìm nạp chưa trả về bằng 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 đã 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 lưu ý những điều sau:
- Điểm cuối phải trả về thời gian hết hạn của mã thông báo; trong ví dụ trên, thời gian này được gán là
data.ExpiresInSeconds
. - Trình tìm nạp mã xác thực phải chuyển thời gian hết hạn (tính bằng giây, kể từ thời điểm tìm nạp) vào thư viện, như minh hoạ trong ví dụ.
- SERVER_TOKEN_URL phụ thuộc vào cách 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
- https://
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 hàm 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 cho biết cách sử dụng SDK JavaScript để theo dõi một chuyến đi chung xe hoặc 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 định nghĩa trước một nhà cung cấp vị trí cho Fleet Engine Ridesharing API. Sử dụng mã dự án và thông tin tham chiếu đến nhà máy mã thông báo để 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 đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn nên chứa một phần tử <div> chứa chế độ xem bản đồ. Phần tử <div> có tên là map_canvas trong ví dụ bên dưới.
Để tránh tình trạng tương tranh, hãy đặt mã chuyến đi cho trình cung cấp vị trí trong lệnh gọi lại được thực hiện sau khi khởi chạy bản đồ.
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 siêu dữ liệu về một chuyến đi từ đối tượng tác vụ bằng cách sử dụng trình cung cấp vị trí. Thông tin meta bao gồm thời gian đến dự kiến và khoảng cách còn lại trước khi đến lấy hàng hoặc trả xe. Các thay đổi đối với thông tin meta sẽ kích hoạt sự kiện cập nhật. 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 thông tin chuyến đi kích hoạt sự kiện lỗi. Ví dụ sau cho thấy 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 trì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 đồ, hãy 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ã.
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. Để áp dụng một kiểu cho bản đồ SDK JavaScript, hãy chỉ định mapId
và mọi mapOptions
khác khi bạn tạo JourneySharingMapView
. Bạn không thể thay đổi hoặc thêm trường mapId
sau khi tạo thực thể cho JourneySharingMapView
. Ví dụ sau đây cho thấy cách bật kiểu bản đồ đã tạo trước đây bằng mã nhận dạng 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 các đ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ách 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à trong mỗi lần cập nhật điểm đánh dấu.
Cách tuỳ chỉnh đơn giản nhất là chỉ định một đối tượng MarkerOptions
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 mỗi điểm đánh dấu được tạo, ghi đè mọi tuỳ chọn mặc định.
Lựa chọn nâng cao hơn là chỉ định một hàm tuỳ chỉnh. Các hàm 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ính tương tác vào điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Cụ thể, Chuyến đi và Tiến trình đặt hàng sẽ truyền dữ liệu đến hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu đại diện: xe, điểm khởi hành, điểm tham chiếu hoặc điểm đến. Sau đó, kiểu điểm đánh dấu sẽ thay đổi dựa trên trạng thái hiện tại của chính phần tử điểm đánh dấu; ví dụ: số điểm tham chiếu còn lại cho đến khi xe kết thúc 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
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
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 đối tượng MarkerOptions
. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của mọi điểm đánh dấu bằng cách sử dụng các chế độ tuỳ chỉnh điểm đánh dấu nêu 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. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của mọi điểm đánh dấu bằng cách sử dụng bất kỳ tham số tuỳ chỉnh điểm đánh dấu nào nêu trên.
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ý lượt nhấp vào bất kỳ điểm đánh dấu nào 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ướ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 tuyến đường trên bản đồ. Thư viện sẽ tạo một đối tượng google.maps.Polyline
cho từng cặp toạ độ trong đường dẫn đang hoạt động hoặc còn lại của xe.
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. Sau đó, thư viện sẽ áp dụng các cách tuỳ chỉnh này trong 2 trường hợp: trước khi thêm đối tượng vào bản đồ và khi dữ liệu dùng cho các đối tượng đã thay đổi.
Tương tự như việc tuỳ chỉnh điểm đánh dấu, bạn có thể chỉ định một tập hợp PolylineOptions
để áp dụng cho mọi đối tượng Polyline
trùng khớp khi các đối tượng này đượ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. Các hàm 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 xe; ví dụ: tô màu cho đối tượng Polyline
thành màu đậm hơn hoặc làm cho đối tượng dày hơn khi xe đang di chuyển chậm hơn. Bạn thậm chí có thể tham gia dựa trên các nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượng Polyline
dựa trên thông tin đó.
Bạn có thể chỉ định các chế độ tuỳ chỉnh bằng cách sử dụng các tham số được cung cấp trong FleetEngineTripLocationProviderOptions
.
Bạn có thể thiết lập chế độ tuỳ chỉnh cho các trạng thái lộ trình khác nhau trong hành trình của xe – đã đi, đang đi du lịch hoặc chưa đi. Các tham số như sau:
takenPolylineCustomization
đối với một đường dẫn đã di chuyển;activePolylineCustomization
cho một tuyến đường chủ động di chuyển;remainingPolylineCustomization
cho đường dẫn chưa đi.
Thay đổi kiểu của các đối tượng Polyline
bằng PolylineOptions
Ví dụ sau cho biết cách định cấu hình định kiểu cho đối tượng Polyline
bằng PolylineOptions
.
Hãy 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 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 cho biết cách định cấu hình kiểu của một đối tượng Polyline
đang hoạt động. 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 các tham 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ị. Để ẩn một đối tượng Polyline
, hãy đặt thuộc tính visible
của đối tượng đó:
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 của tuyến đường đang hoạt động và lộ trình còn lại của phương tiện đi theo. Bạn có thể sử dụng thông tin này để tạo kiểu cho các đối tượng Polyline
theo tốc độ lưu lượng truy cập của các đối tượ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ể dùng InfoWindow
để hiện thêm thông tin về điểm đánh dấu xe 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});
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 cho phù hợp 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 cho thấy cách tắt tính năng tự động điều chỉnh khi bạn định cấu hình chế độ xem bản đồ tiến trình chuyến đi và thứ tự.
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ế 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 làm mất các tuỳ chỉnh đó.
Ví dụ: giả sử bạn có một trang web có thực thể google.maps.Map
chuẩn hiển thị một điểm đánh dấu:
<!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 với mã nhận dạng được chỉ định gần Uluru, thì chuyến đi đó sẽ được hiển thị trên bản đồ.