ปรับแต่งเส้นประกอบเส้นทาง
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เอกสารนี้ครอบคลุมวิธีปรับแต่งเส้นหลายเส้นของเส้นทางสำหรับแผนที่ที่คุณใช้ใน
แอปติดตามการเดินทางบนเว็บสำหรับผู้ใช้ที่เป็นผู้บริโภค
Consumer SDK ช่วยให้คุณควบคุมระดับการมองเห็นของเส้นหลายเหลี่ยมของเส้นทางหรือจัดรูปแบบเส้นหลายเหลี่ยมของเส้นทางสำหรับเส้นทางของการเดินทางบนแผนที่ได้ SDK จะสร้างออบเจ็กต์
google.maps.Polyline สำหรับพิกัดแต่ละคู่ในเส้นทางที่
ใช้งานอยู่หรือเส้นทางที่เหลือของการเดินทาง จากนั้นไลบรารีจะใช้การปรับแต่งเหล่านี้ใน 2 กรณีต่อไปนี้
- ก่อนเพิ่มออบเจ็กต์ลงในแผนที่
- เมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง
จัดรูปแบบโพลีไลน์ของเส้นทาง
คุณจัดรูปแบบเส้นหลายเหลี่ยมของเส้นทางได้โดยใช้พารามิเตอร์การปรับแต่ง เช่นเดียวกับวิธีจัดรูปแบบเครื่องหมาย จากนั้นให้กำหนดค่าการจัดรูปแบบโดยใช้วิธีใดวิธีหนึ่ง
ต่อไปนี้
- ง่ายที่สุด: ใช้
PolylineOptions เพื่อใช้กับออบเจ็กต์ Polyline ที่ตรงกันทั้งหมดเมื่อมีการสร้างหรืออัปเดต
- ขั้นสูง: ระบุฟังก์ชันการปรับแต่ง
ฟังก์ชันการปรับแต่งช่วยให้จัดรูปแบบออบเจ็กต์แต่ละรายการได้ตาม
ข้อมูลที่ Fleet Engine ส่ง ฟังก์ชันนี้สามารถเปลี่ยนรูปแบบของแต่ละออบเจ็กต์
ตามสถานะปัจจุบันของการเดินทางได้ เช่น การระบายสีออบเจ็กต์
Polyline ให้มีเฉดสีเข้มขึ้น หรือทำให้หนาขึ้นเมื่อยานพาหนะเคลื่อนที่ช้าลง คุณยังเข้าร่วมกับแหล่งที่มาจากภายนอก Fleet Engine
และจัดรูปแบบออบเจ็กต์ Polyline ตามข้อมูลดังกล่าวได้ด้วย
พารามิเตอร์การปรับแต่ง
เมื่อจัดรูปแบบเส้นหลายเส้นของเส้นทาง คุณจะใช้พารามิเตอร์ที่ระบุไว้ใน
FleetEngineTripLocationProviderOptions พารามิเตอร์เหล่านี้ระบุ
สถานะเส้นทางต่างๆ ในการเดินทางของยานพาหนะ ดังนี้
ใช้ PolylineOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline
ด้วย PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของ
Polyline ออบเจ็กต์โดยใช้การปรับแต่งเส้นหลายส่วนที่ระบุไว้ก่อนหน้านี้
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
ใช้ฟังก์ชันการปรับแต่งเพื่อจัดรูปแบบเส้นหลายเส้นของเส้นทาง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับเส้น
หลายเส้นของเส้นทางที่ใช้งานอยู่ ทำตามรูปแบบนี้เพื่อปรับแต่งสไตล์ของออบเจ็กต์ Polyline
โดยใช้พารามิเตอร์การปรับแต่งเส้นหลายเส้นของเส้นทางที่ระบุไว้ก่อนหน้านี้
JavaScript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
ควบคุมระดับการมองเห็นของเส้นหลายจุดของเส้นทาง
โดยค่าเริ่มต้น วัตถุ Polyline ทั้งหมดจะมองเห็นได้ หากต้องการทำให้ออบเจ็กต์ Polyline
มองไม่เห็น ให้ตั้งค่าพร็อพเพอร์ตี้ visible ดังนี้
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\u003cp\u003eThis documentation explains how to customize the appearance of route polylines within web-based journey tracking applications using the Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize the style of polylines representing the traveled, active, and remaining portions of a journey's route.\u003c/p\u003e\n"],["\u003cp\u003eStyling can be achieved using simple \u003ccode\u003ePolylineOptions\u003c/code\u003e for uniform styling or with customization functions for dynamic, data-driven styling based on the trip's state.\u003c/p\u003e\n"],["\u003cp\u003eRoute polyline visibility can be controlled by setting the \u003ccode\u003evisible\u003c/code\u003e property to \u003ccode\u003efalse\u003c/code\u003e for the desired polyline customization parameter.\u003c/p\u003e\n"]]],["This document details customizing route polylines in web-based journey tracking apps using the Consumer SDK. You can control the visibility and style of route polylines via `PolylineOptions` for simple styling or through customization functions for more dynamic styling, based on data from Fleet Engine or external sources. Polylines can be customized for \"already traveled,\" \"actively traveled,\" and \"not-yet traveled\" paths using `takenPolylineCustomization`, `activePolylineCustomization`, and `remainingPolylineCustomization` parameters respectively. Visibility can be toggled using the `visible` property.\n"],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/customize-polylines \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/customize-polylines \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-route-polylines \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nThis document covers how to customize route polylines for the map you use in\nyour web-based journey tracking app for consumer users.\n\nWith the Consumer SDK, you can control route polyline visibility or style the\nroute polyline for a journey's route on the map. The SDK creates a\n[`google.maps.Polyline`](/maps/documentation/javascript/reference/polygon#Polyline) object for each pair of coordinates in the journey's\nactive or remaining path. The library then applies these customizations in\ntwo situations:\n\n- before adding the objects to the map\n- when the data used for the objects have changed\n\nStyle route polylines\n\nSimilar to how you can style markers, you style route polylines using\n**customization parameters**. From there, you configure styling using one of the\nfollowing approaches:\n\n- **Simplest** : Use `PolylineOptions` to apply to all of the matched `Polyline` objects when they are created or updated.\n- **Advanced** : Specify a **customization function** . Customization functions allow for individual styling of the objects based on data sent by Fleet Engine. The function can change the styling of each object based on the current state of the journey; for example, coloring the `Polyline` object a deeper shade, or making it thicker when the vehicle is moving slower. You can even join against from sources outside Fleet Engine and style the `Polyline` object based on that information.\n\nCustomization parameters\n\nWhen styling route polylines, you use parameters provided in\n[`FleetEngineTripLocationProviderOptions`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions). These parameters provide for\ndifferent path states in the vehicle's journey, as follows:\n\n- **Already traveled** paths: Use [`takenPolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.takenPolylineCustomization).\n- **Actively traveled** path: Use [`activePolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.activePolylineCustomization).\n- **Not-yet traveled** path: Use [`remainingPolylineCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.remainingPolylineCustomization).\n\nUse `PolylineOptions`\n\nThe following example shows how to configure the styling for a `Polyline` object\nwith [`PolylineOptions`](/maps/documentation/javascript/reference/polygon#PolylineOptions). Follow this pattern to customize the styling of\nany `Polyline` object using any of the polyline customizations listed earlier.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n activePolylineCustomization = {\n strokeWidth: 5,\n strokeColor: 'black',\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n activePolylineCustomization = {\n strokeWidth: 5,\n strokeColor: 'black',\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUse customization functions to style route polylines\n\nThe following example shows how to configure styling for an active route\npolyline. Follow this pattern to customize the styling of any `Polyline` object\nusing any of the route polyline customization parameters listed earlier.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n // Color the route polyline objects in green if the vehicle is nearby.\n activePolylineCustomization =\n (params) =\u003e {\n const distance = params.trip.remainingWaypoints[0].distanceMeters;\n if (distance \u003c 1000) {\n\n // params.polylines contains an ordered list of Polyline objects for\n // the path.\n for (const polylineObject of params.polylines) {\n polylineObject.setOptions({strokeColor: 'green'});\n }\n }\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n // Color the route Polyline objects in green if the vehicle is nearby.\n activePolylineCustomization =\n (params: TripPolylineCustomizationFunctionParams) =\u003e {\n const distance = params.trip.remainingWaypoints[0].distanceMeters;\n if (distance \u003c 1000) {\n\n // params.polylines contains an ordered list of Polyline objects for\n // the path.\n for (const polylineObject of params.polylines) {\n polylineObject.setOptions({strokeColor: 'green'});\n }\n }\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nControl route polyline visibility\n\nBy default, all `Polyline` objects are visible. To make a `Polyline` object\ninvisible, set its [`visible`](/maps/documentation/javascript/reference/polygon#PolylineOptions) property:\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n remainingPolylineCustomization = {visible: false};\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n remainingPolylineCustomization = {visible: false};\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
