本文說明如何自訂地圖的外觀和風格，以及控管資料顯示設定和檢視區塊選項。您可以選擇下列其中一種操作方式：
- 使用雲端式地圖樣式設定
- 直接在自己的程式碼中設定地圖樣式選項
使用雲端式地圖樣式設定為地圖設定樣式
如要將地圖樣式套用至 JavaScript 消費者行程分享地圖，請在建立 JourneySharingMapView 時指定 mapId 和任何其他 mapOptions。
以下範例說明如何使用地圖 ID 套用樣式。
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.
});
直接在自己的程式碼中設定地圖樣式
您也可以在建立 JourneySharingMapView 時設定地圖選項，自訂地圖樣式。下列範例說明如何使用地圖選項設定地圖樣式。如要進一步瞭解可設定的地圖選項，請參閱 Google Maps JavaScript API 參考資料中的 mapOptions。
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" }
]
}
]
}
});
在地圖上顯示資訊
使用 InfoWindow 顯示車輛或其他地點標記的其他相關資訊。詳情請參閱 InfoWindow 的說明。
下列範例說明如何建立 InfoWindow，並將其附加至車輛標記：
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();
停用自動調整功能
如要停止讓地圖自動調整可視區域，以配合車輛和預期路線，請停用自動調整功能。以下範例說明如何設定行程分享地圖檢視畫面時，停用自動調整功能。
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,
...
});