Tài liệu này trình bày cách tuỳ chỉnh giao diện của bản đồ và kiểm soát chế độ hiển thị dữ liệu cũng như các lựa chọn về khung hiển thị. Bạn có thể thực hiện việc này theo các cách sau:
- Sử dụng tính năng định kiểu bản đồ dựa trên đám mây
- Đặt các lựa chọn về kiểu bản đồ ngay trong mã của riêng bạn
Tạo kiểu cho bản đồ bằng tính năng định kiểu bản đồ dựa trên đám mây
Để áp dụng một kiểu bản đồ cho bản đồ chia sẻ chuyến đi của người dùng JavaScript, hãy chỉ định một 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 một 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.
});
Tạo kiểu cho bản đồ ngay 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 về bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây minh hoạ cách tạo kiểu cho bản đồ bằng cách sử dụng các lựa chọn về bản đồ. Để biết thêm thông tin về những lựa chọn mà bạn có thể đặt cho bản đồ, hãy xem mapOptions trong tài liệu tham khảo về API JavaScript của Google Maps.
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" }
]
}
]
}
});
Hiển thị thông tin trên bản đồ
Hiển thị thông tin bổ sung về một phương tiện hoặc điểm đánh dấu vị trí bằng cách sử dụng InfoWindow. Để biết thêm thông tin, hãy xem InfoWindow.
Ví dụ sau đây cho thấy cách tạo một InfoWindow 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 tự động điều chỉnh
Bạn có thể ngăn bản đồ tự động điều chỉnh khung hiển thị cho phù hợp với xe và tuyến đường dự kiến bằng cách tắt chế độ 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,
...
});