Tài liệu này trình bày cách tuỳ chỉnh giao diện của bản đồ, cũng như cách kiểm soát khả năng hiển thị dữ liệu và các lựa chọn về khung nhìn. 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
Đị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 một 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 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.
});
Định kiểu 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 cho thấy cách định kiểu bản đồ bằng các lựa chọn về bản đồ. Để biết thêm thông tin về những lựa chọn về bản đồ mà bạn có thể đặt, hãy xem
mapOptions
trong Tài liệu tham khảo 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êm thông tin 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 InfoWindow và đính kèm vào điểm đánh dấu phương tiện:
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 nhìn cho phù hợp với phương tiện 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 khung hiển thị 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,
...
});