ไลบรารีการติดตามกลุ่มยานพาหนะของ JavaScript ช่วยให้คุณเห็นภาพตำแหน่งของยานพาหนะที่วิ่งอยู่ในกองยานได้แบบเกือบเรียลไทม์ ไลบรารีนี้ใช้ On Demand
Rides and Deliveries
API
เพื่อให้แสดงภาพยานพาหนะและการเดินทาง ไลบรารีการติดตามกลุ่ม JavaScript มีคอมโพเนนต์แผนที่ JavaScript ที่เป็นการแทนที่เอนทิตี google.maps.Map
มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อเชื่อมต่อกับ Fleet Engine
คอมโพเนนต์
ไลบรารีการติดตามยานพาหนะของ JavaScript มีคอมโพเนนต์สำหรับการแสดงภาพยานพาหนะและจุดอ้างอิงในการเดินทาง รวมถึงฟีดข้อมูลดิบสำหรับเวลาถึงโดยประมาณหรือระยะทางที่เหลือของการเดินทาง
มุมมองแผนที่การติดตามยานพาหนะ
คอมโพเนนต์มุมมองแผนที่การติดตามยานพาหนะจะแสดงตำแหน่งของยานพาหนะและจุดอ้างอิงในการเดินทาง หากทราบเส้นทางของยานพาหนะ คอมโพเนนต์มุมมองแผนที่จะเคลื่อนไหวยานพาหนะนั้นเมื่อเคลื่อนที่ไปตามเส้นทางที่คาดคะเน
ผู้ให้บริการตำแหน่ง
ผู้ให้บริการตำแหน่งจะทำงานร่วมกับข้อมูลที่จัดเก็บไว้ใน Fleet Engine เพื่อส่งข้อมูลตำแหน่งสำหรับออบเจ็กต์ที่ติดตามไปยังแผนที่การแชร์เส้นทาง
ผู้ให้บริการตำแหน่งของรถ
ผู้ให้บริการตำแหน่งของรถจะแสดงข้อมูลตำแหน่งของรถคันเดียว โดยจะมีข้อมูลเกี่ยวกับตำแหน่งของรถและการเดินทางปัจจุบันที่กำหนดให้กับพาหนะดังกล่าว
ผู้ให้บริการตำแหน่งกองทัพ
ผู้ให้บริการตำแหน่งของยานพาหนะจะแสดงข้อมูลตำแหน่งของยานพาหนะหลายคัน คุณสามารถกรองให้แสดงยานพาหนะที่ต้องการและตำแหน่งของรถ หรือจะแสดงตำแหน่งยานพาหนะของทั้งกลุ่มก็ได้
ควบคุมการเปิดเผยสถานที่ที่ติดตาม
กฎระดับการเข้าถึงจะระบุว่าออบเจ็กต์ตำแหน่งที่ติดตามจะปรากฏในแผนที่สำหรับผู้ให้บริการตำแหน่ง Fleet Engine เมื่อใด หมายเหตุ - การใช้ผู้ให้บริการตำแหน่งที่กำหนดเองหรือที่ได้มาอาจทำให้กฎการมองเห็นมีการเปลี่ยนแปลง
ยานพาหนะ
ยานพาหนะจะปรากฏให้เห็นทันทีที่สร้างใน Fleet Engine และมองเห็นได้เมื่อยานพาหนะ _state คือ Online
ซึ่งหมายความว่าจะสามารถมองเห็นยานพาหนะได้
แม้จะไม่มีกำหนดการเดินทางปัจจุบันให้กับรถคันนั้น
เครื่องหมายระบุตำแหน่งของจุดอ้างอิง
เครื่องหมายระบุตำแหน่งของจุดระหว่างทางจะระบุจุดต่างๆ ตลอดการเดินทางของยานพาหนะ โดยเริ่มจากต้นทางและสิ้นสุดด้วยจุดหมายสุดท้าย เครื่องหมายตำแหน่งชี้ทางสามารถกำหนดได้ดังนี้
- ต้นทาง - ระบุตำแหน่งต้นทางของการเดินทางโดยใช้ยานพาหนะ
- ระดับกลาง - บ่งบอกถึงการแวะพักของยานพาหนะ
- ปลายทาง - ระบุตำแหน่งสุดท้ายของการเดินทางโดยใช้ยานพาหนะ
จุดอ้างอิงของยานพาหนะที่วางแผนไว้จะแสดงบนแผนที่เป็นเครื่องหมายต้นทาง ระหว่างกลาง และจุดหมาย
เริ่มต้นใช้งานไลบรารีการติดตามกลุ่ม JavaScript
ก่อนใช้ไลบรารีการติดตามกลุ่ม JavaScript ขอให้คุ้นเคยกับ Fleet Engine และการได้รับคีย์ API จากนั้นสร้างรหัสการเดินทางและรหัสยานพาหนะ
สร้างรหัสการเดินทางและการอ้างสิทธิ์รหัสพาหนะ
หากต้องการติดตามรถยนต์โดยใช้ผู้ให้บริการตำแหน่งยานพาหนะ ให้สร้าง JSON Web Token (JWT) พร้อมรหัสการเดินทางและการอ้างสิทธิ์รหัสยานพาหนะ
หากต้องการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ด้วยคีย์ tripid
และ vehicleid
และตั้งค่า value
ของแต่ละคีย์เป็น *
โทเค็นควรสร้างโดยใช้บทบาท Cloud
IAM Fleet Engine Service โปรดทราบว่าการดำเนินการนี้จะให้สิทธิ์เข้าถึงในวงกว้างเพื่อสร้าง อ่าน และแก้ไขเอนทิตี Fleet Engine และควรแชร์กับผู้ใช้ที่เชื่อถือได้เท่านั้น
ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นสำหรับการติดตามตามยานพาหนะและงาน
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "*",
"vehicleid": "*",
}
}
สร้างตัวเรียกโทเค็นการตรวจสอบสิทธิ์
ไลบรารีการติดตามกลุ่ม JavaScript จะขอโทเค็นโดยใช้ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เมื่อข้อใดข้อหนึ่งต่อไปนี้เป็นจริง
- ไม่มีโทเค็นที่ถูกต้อง เช่น ในกรณีที่ไม่ได้เรียกใช้ Fetcher ในการโหลดหน้าเว็บใหม่ หรือเมื่อ Googlebot ไม่ได้ส่งโทเค็นกลับมา
- โทเค็นที่ดึงข้อมูลไว้ก่อนหน้านี้หมดอายุแล้ว
- โทเค็นที่ดึงข้อมูลก่อนหน้านี้จะปรากฏภายใน 1 นาทีก่อนจะหมดอายุ
ไม่เช่นนั้น ไลบรารีจะใช้โทเค็นที่ออกให้ก่อนหน้านี้ซึ่งยังคงใช้งานได้ และไม่เรียกใช้ตัวดึงข้อมูล
คุณสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เพื่อเรียกข้อมูลโทเค็นที่สร้างขึ้นด้วยการอ้างสิทธิ์ที่เหมาะสมในเซิร์ฟเวอร์ได้โดยใช้ใบรับรองบัญชีบริการสำหรับโปรเจ็กต์ของคุณ คุณควรสร้างโทเค็นบนเซิร์ฟเวอร์เท่านั้นและอย่าแชร์ใบรับรองกับไคลเอ็นต์ มิฉะนั้น อาจทำให้ระบบ ของคุณถูกบุกรุก
ตัวดึงข้อมูลต้องส่งคืนโครงสร้างข้อมูลที่มี 2 ช่องซึ่งรวมอยู่ใน Promise ดังนี้
- สตริง
token
- หมายเลข
expiresInSeconds
โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจากดึงข้อมูล
ตัวอย่างต่อไปนี้แสดงวิธีสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
เมื่อใช้ปลายทางฝั่งเซิร์ฟเวอร์เพื่อสร้างโทเค็น โปรดคำนึงถึงสิ่งต่อไปนี้
- ปลายทางต้องแสดงผลเวลาหมดอายุของโทเค็น ในตัวอย่างด้านบนจะระบุเป็น
data.ExpiresInSeconds
- ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์จะต้องส่งผ่านเวลาหมดอายุ (เป็นวินาที นับจากเวลาดึงข้อมูล) ไปยังไลบรารีตามที่แสดงในตัวอย่าง
- SERVER_TOKEN_URL ขึ้นอยู่กับการติดตั้งใช้งานแบ็กเอนด์ URL ตัวอย่าง ได้แก่
- https://
SERVER_URL
/token/driver/VEHICLE_ID
- https://
SERVER_URL
/token/consumer/TRIP_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
โหลดแผนที่จาก HTML
ตัวอย่างต่อไปนี้แสดงวิธีโหลดไลบรารีการแชร์เส้นทางการท่องเว็บของ JavaScript จาก URL ที่ระบุ พารามิเตอร์ callback จะทํางานฟังก์ชัน initMap
หลังจากโหลด API แอตทริบิวต์ defer ช่วยให้เบราว์เซอร์แสดงผลส่วนที่เหลือของหน้าเว็บต่อไปได้ขณะที่ API โหลด
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>
ติดตามยานพาหนะ
ส่วนนี้จะแสดงวิธีใช้ไลบรารี JavaScript การติดตามยานพาหนะเพื่อติดตามยานพาหนะ อย่าลืมโหลดไลบรารีจากฟังก์ชันเรียกกลับที่ระบุในแท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด
สร้างอินสแตนซ์ผู้ให้บริการตำแหน่งของรถ
ไลบรารีการติดตามยานพาหนะของ JavaScript จะกำหนดผู้ให้บริการตำแหน่งไว้ล่วงหน้าสำหรับ API การโดยสารและการนำส่งแบบออนดีมานด์ ใช้รหัสโปรเจ็กต์และการอ้างอิงไปยัง โรงงานโทเค็นเพื่อสร้างอินสแตนซ์
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
เริ่มต้นมุมมองแผนที่
หลังจากโหลดไลบรารีการแชร์เส้นทางการท่องเว็บแล้ว ให้เริ่มต้นมุมมองแผนที่ แล้วเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมีองค์ประกอบ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ใน ตัวอย่างด้านล่าง
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
ฟังเหตุการณ์การเปลี่ยนแปลง
คุณเรียกข้อมูลเมตาเกี่ยวกับยานพาหนะจากออบเจ็กต์ vehicle
ได้โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาจะระบุเวลาถึงโดยประมาณและระยะทางที่เหลือก่อนที่รถจะรับหรือลงจอดครั้งต่อไป การเปลี่ยนแปลงข้อมูลเมตาจะทำให้เกิดเหตุการณ์ update ตัวอย่างต่อไปนี้แสดงวิธีติดตาม
เหตุการณ์การเปลี่ยนแปลงเหล่านี้
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
ฟังข้อผิดพลาด
ข้อผิดพลาดที่เกิดขึ้นแบบอะซิงโครนัสจากการขอข้อมูลยานพาหนะทำให้เกิดเหตุการณ์ข้อผิดพลาด ตัวอย่างต่อไปนี้แสดงวิธีติดตามเหตุการณ์เหล่านี้เพื่อจัดการข้อผิดพลาด
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
หยุดติดตาม
หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามรถ ให้ลบรหัสยานพาหนะจากผู้ให้บริการตำแหน่ง
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
ดูกลุ่มยานพาหนะ
ส่วนนี้จะแสดงวิธีใช้ไลบรารีการแชร์เส้นทางการท่องเว็บของ JavaScript เพื่อดูกลุ่มยานพาหนะ อย่าลืมโหลดไลบรารีจากฟังก์ชันเรียกกลับที่ระบุในแท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด
สร้างอินสแตนซ์ผู้ให้บริการตำแหน่งกลุ่มยานพาหนะ
JavaScript Fleet Tracking Library ระบุผู้ให้บริการตำแหน่งที่ดึงข้อมูลยานพาหนะหลายคันจาก On Demand Rides and Deliveries API ล่วงหน้า ใช้รหัสโปรเจ็กต์รวมทั้งการอ้างอิงตัวเรียกโทเค็นเพื่อสร้างอินสแตนซ์
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter
ระบุคำค้นหาที่ใช้เพื่อกรองยานพาหนะที่แสดงในแผนที่
ระบบจะส่งตัวกรองนี้ไปยัง Fleet Engine โดยตรง ดู
ListVehiclesRequest
สำหรับรูปแบบที่รองรับ
locationRestriction
จำกัดพื้นที่ที่จะแสดงยานพาหนะบนแผนที่
อีกทั้งยังเป็นการควบคุมว่าจะใช้งานการติดตามตําแหน่งหรือไม่ การติดตามตำแหน่งจะไม่เริ่มต้นจนกว่าคุณจะตั้งค่านี้
เมื่อสร้างผู้ให้บริการตำแหน่งแล้ว ให้เริ่มต้นมุมมองแผนที่
ตั้งค่าการจำกัดตำแหน่งโดยใช้วิวพอร์ตของแผนที่
สามารถกำหนดค่าขอบเขต locationRestriction
ให้ตรงกับพื้นที่ที่แสดงในมุมมองแผนที่
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
ฟังเหตุการณ์การเปลี่ยนแปลง
คุณจะเรียกข้อมูลเมตาเกี่ยวกับกองยานจากออบเจ็กต์ vehicles
ได้โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาประกอบด้วยพร็อพเพอร์ตี้ของรถ เช่น สถานะการนำทาง ระยะทางไปยังจุดอ้างอิงถัดไป และแอตทริบิวต์ที่กำหนดเอง ดูเอกสารอ้างอิงสำหรับข้อมูลเพิ่มเติม การเปลี่ยนแปลงข้อมูลเมตาจะทำให้เหตุการณ์อัปเดต ตัวอย่างต่อไปนี้แสดงวิธีติดตามเหตุการณ์การเปลี่ยนแปลงเหล่านี้
JavaScript
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
ฟังข้อผิดพลาด
ข้อผิดพลาดที่เกิดขึ้นแบบอะซิงโครนัสจากการขอข้อมูลกลุ่มยานพาหนะ จะทำให้เกิดเหตุการณ์ข้อผิดพลาด สำหรับตัวอย่างแสดงวิธีฟังเหตุการณ์เหล่านี้ โปรดดูฟังข้อผิดพลาด
หยุดติดตาม
หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามกลุ่มอุปกรณ์ ให้ตั้งค่าขอบเขตของผู้ให้บริการตำแหน่งเป็น Null
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
ปรับแต่งรูปลักษณ์และความรู้สึกของแผนที่ฐาน
หากต้องการปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่ ให้จัดรูปแบบแผนที่โดยใช้เครื่องมือในระบบคลาวด์หรือตั้งค่าตัวเลือกในโค้ดโดยตรง
ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
การจัดรูปแบบแผนที่ในระบบคลาวด์ ช่วยให้คุณสามารถสร้างและแก้ไขรูปแบบแผนที่สำหรับแอปใดก็ตามที่ใช้ Google Maps จากคอนโซล Google Cloud โดยไม่ต้องเปลี่ยนแปลงโค้ด ระบบจะบันทึกรูปแบบแผนที่เป็นรหัสแผนที่ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ หากต้องการใช้รูปแบบกับแมปการติดตามกลุ่ม JavaScript ให้ระบุ mapId
เมื่อสร้าง JourneySharingMapView
เปลี่ยนแปลงหรือเพิ่มช่อง mapId
ไม่ได้หลังจากสร้างอินสแตนซ์ JourneySharingMapView
แล้ว ตัวอย่างต่อไปนี้แสดงวิธีเปิดใช้รูปแบบแผนที่ที่สร้างไว้ก่อนหน้านี้โดยใช้รหัสแผนที่
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
ใช้การจัดรูปแบบแผนที่แบบโค้ด
การปรับแต่งการจัดรูปแบบแผนที่อีกวิธีหนึ่งคือการตั้งค่า mapOptions
เมื่อสร้าง JourneySharingMapView
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" }
]
}
]
}
});
ใช้การปรับแต่งเครื่องหมาย
ไลบรารีการติดตามกลุ่ม JavaScript ของ JavaScript จะช่วยให้คุณปรับแต่งรูปลักษณ์ของเครื่องหมายที่เพิ่มลงในแผนที่ได้ คุณสามารถทำเช่นนี้ได้โดยระบุการกำหนดค่าเครื่องหมาย ซึ่งไลบรารีการติดตามยานพาหนะจะนำมาใช้ก่อนเพิ่มเครื่องหมายลงในแผนที่ และเมื่อมีการอัปเดตเครื่องหมายทุกครั้ง
คุณสร้างการปรับแต่งง่ายๆ ได้โดยการระบุออบเจ็กต์ MarkerOptions
ที่จะใช้กับเครื่องหมายทั้งหมดในประเภทเดียวกัน การเปลี่ยนแปลงที่ระบุในออบเจ็กต์จะมีผลหลังจากสร้างเครื่องหมายแต่ละตัวโดยเขียนทับตัวเลือกเริ่มต้น
หากเป็นตัวเลือกขั้นสูงขึ้น คุณจะระบุฟังก์ชันการปรับแต่งได้ ฟังก์ชันการปรับแต่งช่วยให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูลได้ รวมถึงเพิ่มการโต้ตอบลงในเครื่องหมาย เช่น การจัดการคลิก โดยเฉพาะการติดตามยานพาหนะจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทของวัตถุที่เครื่องหมายแสดง เช่น ยานพาหนะ จุดแวะ หรืองาน ซึ่งจะทำให้การจัดรูปแบบตัวทำเครื่องหมายเปลี่ยนแปลงตามสถานะปัจจุบันขององค์ประกอบตัวทำเครื่องหมาย เช่น จำนวนจุดแวะพักที่เหลืออยู่หรือประเภทงาน คุณยังสามารถนำไปรวมกับข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายโดยอาศัยข้อมูลดังกล่าวได้
นอกจากนี้ คุณยังสามารถใช้ฟังก์ชันการปรับแต่งเพื่อกรองการแสดงเครื่องหมายได้ด้วย
หากต้องการใช้วิธีนี้ ให้เรียก setVisible(false)
บนเครื่องหมาย
อย่างไรก็ตาม เนื่องด้วยเหตุผลด้านประสิทธิภาพ เราขอแนะนำให้คุณกรองด้วยการกรองแบบเนทีฟในผู้ให้บริการตำแหน่ง เช่น FleetEngineFleetLocationProvider.vehicleFilter
แต่หากต้องการฟังก์ชันการกรองเพิ่มเติม คุณก็ใช้ตัวกรองโดยใช้ฟังก์ชันการปรับแต่งได้
ไลบรารีการติดตามยานพาหนะมีพารามิเตอร์การปรับแต่งต่อไปนี้
เปลี่ยนรูปแบบของเครื่องหมายโดยใช้ MarkerOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะด้วยออบเจ็กต์ MarkerOptions
ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของเครื่องหมายโดยใช้พารามิเตอร์การปรับแต่งเครื่องหมายที่แสดงด้านบน
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
เปลี่ยนแปลงรูปแบบของเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของเครื่องหมายโดยใช้พารามิเตอร์การกำหนดค่าเครื่องหมายที่แสดงด้านบน
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
เพิ่มการจัดการคลิกลงในเครื่องหมาย
ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มการจัดการคลิกลงในเครื่องหมายยานพาหนะ ทำตามรูปแบบนี้เพื่อเพิ่มการจัดการคลิกลงในเครื่องหมายโดยใช้พารามิเตอร์การกำหนดค่าเครื่องหมายที่แสดงด้านบน
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
กรองเครื่องหมายที่ปรากฏ
ตัวอย่างต่อไปนี้แสดงวิธีกรองเครื่องหมายยานพาหนะที่จะแสดง ทำตามรูปแบบนี้เพื่อกรองเครื่องหมายโดยใช้พารามิเตอร์การปรับแต่งเครื่องหมายที่แสดงข้างต้น
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
ใช้การปรับแต่งเส้นประกอบเมื่อติดตามยานพาหนะ
ด้วยไลบรารีการติดตามยานพาหนะ คุณยังสามารถปรับแต่งรูปลักษณ์ของเส้นทางรถที่ตามมาบนแผนที่ได้ด้วย ไลบรารีจะสร้างออบเจ็กต์ google.maps.Polyline สำหรับพิกัดแต่ละคู่ในเส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ของรถ
คุณจัดรูปแบบวัตถุ Polyline
ได้โดยการระบุการปรับแต่งเส้นประกอบ จากนั้นไลบรารีจะใช้การกำหนดค่าเหล่านี้ใน 2 สถานการณ์คือ ก่อนเพิ่มออบเจ็กต์ลงในแผนที่ และเมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง
คุณระบุชุดของ PolylineOptions
เพื่อใช้กับออบเจ็กต์ Polyline
ที่ตรงกันทั้งหมดเมื่อมีการสร้างหรืออัปเดตได้ เช่นเดียวกับการปรับแต่งเครื่องหมาย
นอกจากนั้น คุณสามารถระบุฟังก์ชันการปรับแต่งได้ด้วย ฟังก์ชันการปรับแต่งช่วยให้สามารถจัดรูปแบบวัตถุทีละรายการตามข้อมูลที่ส่งโดย Fleet Engine
ฟังก์ชันดังกล่าวจะเปลี่ยนสไตล์ของวัตถุแต่ละชิ้นตามสถานะปัจจุบันของยานพาหนะได้ เช่น การทำให้วัตถุ Polyline
เป็นเฉดสีที่เข้มขึ้น หรือทำให้วัตถุดูหนาขึ้นเมื่อยานพาหนะเคลื่อนไหวช้าลง คุณยังรวมระบบกับแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบออบเจ็กต์ Polyline
โดยอิงตามข้อมูลดังกล่าวได้ด้วย
คุณระบุการปรับแต่งได้โดยใช้พารามิเตอร์ที่ให้ไว้ใน FleetEngineVehicleLocationProviderOptions
คุณสามารถตั้งค่าการกำหนดค่าสำหรับสถานะเส้นทางต่างๆ ในเส้นทางของรถได้ กล่าวคือ เดินทางแล้ว เดินทางแล้ว หรือยังไม่ได้เดินทาง พารามิเตอร์มีดังนี้
takenPolylineCustomization
สำหรับเส้นทางที่ใช้ก่อนหน้านี้activePolylineCustomization
สำหรับเส้นทางที่กำลังเดินทางอยู่remainingPolylineCustomization
สำหรับเส้นทางที่ยังไม่ได้เดินทาง
เปลี่ยนการจัดรูปแบบของวัตถุ Polyline
โดยใช้ PolylineOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline
ด้วย PolylineOptions
ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline
โดยใช้การปรับแต่งเส้นประกอบใดก็ได้ที่ระบุไว้ก่อนหน้านี้
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
เปลี่ยนการจัดรูปแบบของวัตถุ Polyline
โดยใช้ฟังก์ชันการปรับแต่ง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของออบเจ็กต์ Polyline
ที่ใช้งานอยู่ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline
โดยใช้พารามิเตอร์การปรับแต่งโพลีไลน์ใดก็ได้ที่ระบุไว้ก่อนหน้านี้
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[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
รายการ หากต้องการซ่อนออบเจ็กต์ Polyline
ให้ตั้งค่าพร็อพเพอร์ตี้ visible
ดังนี้
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
แสดงผลออบเจ็กต์ Polyline
ที่รับรู้การจราจร
Fleet Engine จะแสดงผลข้อมูลความเร็วของการจราจรของเส้นทางที่มีการใช้งานและที่เหลือของยานพาหนะที่วิ่งตาม คุณใช้ข้อมูลนี้เพื่อจัดรูปแบบออบเจ็กต์ Polyline
ตามความเร็วการรับส่งข้อมูลได้ ดังนี้
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
แสดง InfoWindow
สำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง
คุณสามารถใช้ InfoWindow
เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับรถหรือเครื่องหมายระบุตำแหน่งได้
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow
และแนบไว้กับเครื่องหมายยานพาหนะ
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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,
...
});
แทนที่แผนที่ที่มีอยู่
คุณสามารถแทนที่แผนที่ที่มีอยู่ซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ โดยไม่สูญเสียการปรับแต่งเหล่านั้น
ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มีเอนทิตี google.maps.Map
มาตรฐานที่แสดงเครื่องหมาย
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById("map"));
map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });
// The marker, now positioned at Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, map: map });
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
></script>
</body>
</html>
วิธีเพิ่มไลบรารีการแชร์เส้นทางการท่องเว็บของ JavaScript ซึ่งรวมการติดตามยานพาหนะ
- เพิ่มโค้ดสำหรับต้นทางโทเค็นการตรวจสอบสิทธิ์
- เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน
initMap()
- เริ่มต้นมุมมองแผนที่ในฟังก์ชัน
initMap()
มุมมองจะมีแผนที่ - ย้ายการปรับแต่งไปไว้ในฟังก์ชันเรียกกลับสำหรับการเริ่มต้นมุมมองแผนที่
- เพิ่มไลบรารีตำแหน่งลงในตัวโหลด API
ตัวอย่างต่อไปนี้แสดงการเปลี่ยนแปลงที่ควรทำ
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Oracle Park
var marker = new google.maps.Marker({position: oraclePark, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
></script>
</body>
</html>
หากคุณควบคุมยานพาหนะที่มีรหัสตามที่ระบุใกล้กับ Oracle Park ยานพาหนะดังกล่าวจะแสดงในแผนที่