Để tuỳ chỉnh giao diện của thành phần bản đồ, hãy định kiểu bản đồ bằng cách sử dụng tính năng định kiểu bản đồ dựa trên đám mây hoặc bằng cách đặt các lựa chọn trực tiếp trong mã.
Định kiểu bản đồ bằng tính năng định kiểu bản đồ dựa trên đám mây
Để áp dụng kiểu bản đồ cho bản đồ chia sẻ hành trình của người dùng JavaScript, hãy chỉ định a
mapId và
mọi
mapOptions
khác khi bạn tạo JourneySharingMapView.
Các ví dụ sau đây cho thấy cách áp dụng kiểu bản đồ 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'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Định kiểu bản đồ trực tiếp trong mã của riêng bạn
Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách đặt các lựa chọn bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây cho thấy cách định kiểu bản đồ bằng các lựa chọn bản đồ. Để biết thêm thông tin về những lựa chọn bản đồ mà bạn có thể đặt, hãy xem
mapOptions
trong tài liệu tham khảo API Google Maps JavaScript.
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" }
]
}
]
}
});
Tắt tính năng tự động điều chỉnh
Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn cho xe và tuyến đường dự kiến bằng cách tắt tính năng tự động điều chỉnh. Ví dụ sau đây 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 đồ chia sẻ hành 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ể thay thế bản đồ hiện có có chứa điểm đánh dấu hoặc các chế độ tuỳ chỉnh khác mà không làm mất các chế độ tuỳ chỉnh đó.
Ví dụ: giả sử bạn có một trang web có thực thể google.maps.Map tiêu chuẩn mà trên đó có 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 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.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Cách thêm thư viện theo dõi đội xe JavaScript:
- Thêm mã cho nhà máy mã thông báo xác thực.
- Khởi động nhà cung cấp vị trí trong hàm
initMap(). - Khởi động chế độ xem bản đồ trong hàm
initMap(). Chế độ xem này chứa bản đồ. - Di chuyển chế độ tuỳ chỉnh vào hàm callback để khởi động chế độ xem bản đồ.
- Thêm thư viện vị trí vào trình tải API.
Ví dụ về việc thay thế bản đồ bằng các tác vụ đã lên lịch
Ví dụ sau đây cho thấy cách sử dụng bản đồ hiện có mà bạn khởi động đối tượng nhà cung cấp vị trí cho trường hợp sử dụng tác vụ đã lên lịch. Mã này tương tự
đối với các trường hợp sử dụng chuyến đi theo yêu cầu, ngoại trừ việc bạn sử dụng
FleetEngineVehicleLocationProvider thay vì
FleetEngineDeliveryVehicleLocationProvider.
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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 = mapView.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 journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Nếu bạn vận hành một xe giao hàng có mã được chỉ định gần Cầu tàu 39, thì xe đó sẽ được hiển thị trên bản đồ.