เอกสารนี้ครอบคลุมวิธีปรับแต่งรูปลักษณ์ของแผนที่ รวมถึงควบคุม ตัวเลือกการแสดงข้อมูลและวิวพอร์ต โดยทำได้ดังนี้
- ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
- ตั้งค่าตัวเลือกรูปแบบแผนที่ในโค้ดของคุณเองโดยตรง
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้รูปแบบแผนที่กับแผนที่การแชร์การเดินทางของผู้บริโภคใน JavaScript ให้ระบุ
mapId
และ
mapOptions
อื่นๆ เมื่อสร้าง JourneySharingMapView
ตัวอย่างต่อไปนี้แสดงวิธีใช้รูปแบบแผนที่ด้วยรหัสแผนที่
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
ตัวอย่างต่อไปนี้แสดงวิธีจัดรูปแบบแผนที่โดยใช้
ตัวเลือกแผนที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกแผนที่ที่ตั้งค่าได้ที่
mapOptions
ในข้อมูลอ้างอิงของ Google Maps JavaScript API
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" }
]
}
]
}
});
ควบคุมระดับการเข้าถึงข้อมูลงานใน SDK
คุณควบคุมระดับการมองเห็นของออบเจ็กต์งานบางอย่างบนแผนที่ได้โดยใช้ กฎการมองเห็น
ระดับการเข้าถึงเริ่มต้นของข้อมูลงาน
โดยค่าเริ่มต้น ข้อมูลของงานที่มอบหมายให้ยานพาหนะจะมองเห็นได้เมื่อยานพาหนะอยู่ห่างจากจุดแวะพักของงานไม่เกิน 5 จุด การมองเห็นจะสิ้นสุดลงเมื่อมีการ ยกเลิกหรือดำเนินการงานเสร็จสมบูรณ์
ตารางนี้แสดงระดับการแชร์เริ่มต้นสำหรับงานแต่ละประเภท คุณปรับแต่งระดับการเข้าถึงสำหรับงานหลายอย่างได้ แต่ไม่ใช่ทั้งหมด ดูรายละเอียดเพิ่มเติมเกี่ยวกับประเภทงานได้ที่ประเภทงานในคู่มืองานที่กำหนดเวลาไว้
ประเภทงาน | การแสดงผลเริ่มต้น | ปรับแต่งได้ไหม | คำอธิบาย |
---|---|---|---|
งานการไม่พร้อมให้บริการ | ไม่แสดง | ไม่ | ใช้สำหรับเวลาพักและเติมน้ำมันของคนขับ หากเส้นทางไปยังงานนำส่ง มีจุดแวะพักของยานพาหนะอื่นด้วย ระบบจะไม่แสดงจุดแวะพักนั้น หากมีเฉพาะงานที่ระบุว่าไม่พร้อมให้บริการ เวลาถึงโดยประมาณ และเวลาทำงานเสร็จโดยประมาณจะยังคงแสดงสำหรับงาน การนำส่งเอง |
เปิดงานเกี่ยวกับยานพาหนะ | แสดง | ใช่ | การมองเห็นจะสิ้นสุดลงเมื่อมีการยกเลิกหรือทำงานเสร็จ คุณปรับแต่งระดับการมองเห็นของงานเกี่ยวกับยานพาหนะที่ยังไม่เสร็จได้ ดูปรับแต่งระดับการมองเห็นของงาน ยานพาหนะที่เปิดอยู่ |
งานเกี่ยวกับยานพาหนะที่ปิดแล้ว | ไม่แสดง | ไม่ | คุณปรับแต่งระดับการมองเห็นของงานเกี่ยวกับยานพาหนะที่ปิดแล้วไม่ได้ |
ปรับแต่งระดับการมองเห็นของงานยานพาหนะที่เปิดอยู่
อินเทอร์เฟซ TaskTrackingInfo
มีองค์ประกอบข้อมูลงานหลายอย่าง
ที่สามารถแสดงได้ด้วย Consumer SDK
องค์ประกอบข้อมูลงานที่ปรับแต่งได้ | |
---|---|
โพลีไลน์ของเส้นทาง เวลาถึงโดยประมาณ เวลาโดยประมาณที่ใช้ในการทำงานให้เสร็จ |
ระยะทางขับรถที่เหลือไปยังงาน จำนวนป้ายรถเมล์ที่เหลือ ตำแหน่งของยานพาหนะ |
ตัวเลือกระดับการเข้าถึงต่องาน
คุณปรับแต่งการกำหนดค่าระดับการเข้าถึงได้ทีละงานโดยการตั้งค่า TaskTrackingViewConfig
เมื่อสร้างหรืออัปเดตงานภายใน Fleet Engine ใช้ตัวเลือกการมองเห็นต่อไปนี้เพื่อสร้างเกณฑ์ในการ
กำหนดระดับการมองเห็นขององค์ประกอบงาน
ตัวเลือกระดับการเข้าถึง | ||
---|---|---|
จำนวนป้ายรถเมล์ที่เหลือ ระยะเวลาจนถึงเวลาถึงโดยประมาณ ระยะทางที่เหลือ |
แสดงเสมอ ไม่แสดง |
ตัวอย่างเช่น สมมติว่าการปรับแต่งตัวอย่างจะปรับระดับการมองเห็นสำหรับองค์ประกอบข้อมูล 3 รายการโดยใช้เกณฑ์ที่แสดงในตารางต่อไปนี้ องค์ประกอบอื่นๆ ทั้งหมด จะเป็นไปตามกฎการแชร์เริ่มต้น
องค์ประกอบข้อมูลที่จะปรับ | ระดับการแชร์ | เกณฑ์ |
---|---|---|
โพลีไลน์ของเส้นทาง | แสดง | ยานพาหนะอยู่ภายใน 3 ป้าย |
ETA | แสดง | ระยะทางขับรถที่เหลือสั้นกว่า 5,000 เมตร |
จำนวนป้ายรถเมล์ที่เหลือ | ไม่แสดง | ยานพาหนะอยู่ภายใน 3 ป้าย |
ตัวอย่างต่อไปนี้แสดงการกำหนดค่านี้
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
กฎการแสดงผลเส้นหลายเหลี่ยมของเส้นทางและตำแหน่งยานพาหนะ
เส้นหลายเส้นของเส้นทางจะมองไม่เห็นเว้นแต่ตำแหน่งของยานพาหนะจะมองเห็นด้วย เช่นกัน มิฉะนั้นจะอนุมานตำแหน่งของยานพาหนะได้จากจุดสิ้นสุดของ เส้นหลายเส้น
หลักเกณฑ์เหล่านี้ช่วยให้คุณระบุชุดค่าผสมที่ถูกต้องสำหรับตัวเลือกเส้นหลายจุดของเส้นทางและตัวเลือกการมองเห็นตำแหน่งของยานพาหนะ
ตัวเลือกระดับการเข้าถึงเดียวกัน | เกณฑ์การแสดงผล | คำแนะนำ |
---|---|---|
ตั้งค่าตัวเลือกเส้นหลายเส้นของเส้นทางให้แสดงเสมอ | ตั้งค่าตำแหน่งรถให้มองเห็นได้เสมอ | |
ตั้งค่าตำแหน่งของรถยนต์เป็นไม่แสดง | ตั้งค่าเส้นหลายเส้นของเส้นทางให้ไม่แสดง | |
ตัวเลือกระดับการเข้าถึงเป็นตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
|
ตั้งค่าตัวเลือก Polyline ของเส้นทางให้มีค่าน้อยกว่าหรือเท่ากับค่าที่ตั้งไว้ สำหรับตำแหน่งของยานพาหนะ เช่น "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
ตัวเลือกระดับการเข้าถึงต่างๆ | เกณฑ์การแสดงผล | คำแนะนำ |
ตำแหน่งของรถยนต์แสดงอยู่ | ซึ่งจะเกิดขึ้นเมื่อเป็นไปตามทั้งตัวเลือกตำแหน่งยานพาหนะและ ตัวเลือกระดับการเข้าถึงเส้นหลายเส้น เช่น "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } ในตัวอย่างนี้ ตำแหน่งของยานพาหนะจะแสดงก็ต่อเมื่อจำนวนป้ายรถเมล์ที่เหลืออยู่มีอย่างน้อย 3 ป้ายและระยะทางขับรถที่เหลืออยู่มีอย่างน้อย 3, 000 เมตร |
ปิดใช้การปรับอัตโนมัติ
คุณหยุดไม่ให้แผนที่ปรับวิวพอร์ตให้พอดีกับยานพาหนะและเส้นทางที่คาดการณ์ไว้โดยอัตโนมัติได้โดยการปิดใช้การปรับให้พอดีอัตโนมัติ ตัวอย่างต่อไปนี้ แสดงวิธีปิดใช้การปรับอัตโนมัติเมื่อกำหนดค่ามุมมองแผนที่ การแชร์การเดินทาง
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,
...
});