自訂新增至地圖標記的外觀和風格。您可以透過兩種方式自訂地圖中新增的標記外觀與風格:
根據類型設定標記:指定
MarkerOptions
敬上 物件改為設定相同類型的標記樣式。您指定的變更 並會在每個標記建立後套用,覆寫任何預設選項。 如需範例,請參閱本指南的「使用MarkerOptions
變更標記樣式」一節。根據資料設定標記樣式:指定自訂函式,以便根據資料設定標記樣式。您可以根據旅程分享或外部來源的資料設定樣式:
分享歷程的資料:歷程分享會將標記資料傳送給 自訂函式,包括標記所代表的物件類型: 例如車輛、出發地、路線控點或目的地標記樣式會根據標記元素的目前狀態而變更。例如 直到車輛完成行程為止的剩餘路線控點
外部來源:您可以將行程分享資料與 Fleet Engine 以外來源的資料結合,並根據這些資訊設定標記樣式。
如需範例,請參閱 使用自訂函式變更標記樣式 部分
在標記中加入點擊處理方式:例如, 請參閱「新增點擊處理」。
標記自訂選項
這兩種方式在 Google Analytics 中
Maps JavaScript API
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
使用 MarkerOptions
變更標記樣式
以下範例說明如何透過
MarkerOptions
物件。您可以按照這個模式,使用「標記自訂選項」中列出的任何標記自訂項目,自訂任何標記的樣式。
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
使用自訂函式變更標記樣式
下例說明如何使用 設定車輛標記樣式 自訂函式請按照此模式自訂任一樣式的樣式 標記使用 標記自訂選項。
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}`);
};
在標記中加入點擊處理方式
以下範例說明如何為車輛標記新增點擊處理。依照這個模式,在任何使用標記的標記中加入點擊處理方式 標記自訂選項中所列的自訂參數。
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.
});
}
};