JavaScript SDK ช่วยให้คุณเห็นภาพตำแหน่งของ
ยานพาหนะและตำแหน่งที่สนใจที่ติดตามใน Fleet Engine ไลบรารีมีคอมโพเนนต์แผนที่ JavaScript ที่เป็นการแทนที่แบบดร็อปอินสำหรับเอนทิตี google.maps.Map
มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อเชื่อมต่อกับ Fleet Engine การใช้ JavaScript SDK ช่วยให้คุณนำเสนอประสบการณ์การเดินทางและความคืบหน้าในคำสั่งซื้อที่ปรับแต่งได้ เคลื่อนไหวได้จากเว็บแอปพลิเคชันของคุณ
คอมโพเนนต์
JavaScript SDK มีคอมโพเนนต์สำหรับการแสดงภาพยานพาหนะและจุดอ้างอิง รวมถึงฟีดข้อมูลดิบสำหรับเวลาถึงโดยประมาณของผู้ขับหรือระยะทางที่เหลือที่ต้องขับ
มุมมองแผนที่ความคืบหน้าในการเดินทางและคำสั่งซื้อ
คอมโพเนนต์มุมมองแผนที่จะแสดงตำแหน่งของยานพาหนะและจุดอ้างอิง หากคุณทราบเส้นทางของยานพาหนะ คอมโพเนนต์มุมมองแผนที่จะเคลื่อนไหวของยานพาหนะนั้นขณะที่เคลื่อนที่ไปตามเส้นทางที่คาดคะเน
ผู้ให้บริการตำแหน่งการเดินทาง
JavaScript SDK มีผู้ให้บริการตำแหน่งการเดินทางที่ป้อนข้อมูลตำแหน่งสำหรับออบเจ็กต์ที่ติดตามลงในแผนที่ความคืบหน้าของการเดินทางและคำสั่งซื้อ
คุณสามารถใช้ผู้ให้บริการสถานที่เดินทางเพื่อติดตามข้อมูลต่อไปนี้
- สถานที่รับหรือรับส่งของการเดินทาง
- ตําแหน่งและเส้นทางของยานพาหนะที่กําหนดให้กับการเดินทาง
ออบเจ็กต์ตำแหน่งที่ติดตาม
ผู้ให้บริการตำแหน่งจะติดตามตำแหน่งของวัตถุ เช่น จุดอ้างอิงและยานพาหนะ
ตำแหน่งต้นทาง
ตำแหน่งต้นทางคือจุดเริ่มต้นของการเดินทาง ซึ่งจะทำเครื่องหมาย สถานที่รับของ
ตำแหน่งปลายทาง
สถานที่จุดหมายคือสถานที่ที่การเดินทางสิ้นสุด โดยจะทำเครื่องหมายสถานที่ส่ง
ตำแหน่งจุดอ้างอิง
ตำแหน่งการชี้ทางคือตำแหน่งใดๆ ตามเส้นทางของการเดินทางที่ติดตาม ตัวอย่างเช่น แต่ละป้ายหยุดในเส้นทางรถประจำทางคือตำแหน่งการชี้ทาง
ตำแหน่งของรถ
ตำแหน่งของรถคือตำแหน่งของยานพาหนะที่ติดตาม โดยอาจรวมเส้นทางสำหรับยานพาหนะด้วยก็ได้
ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์
หากต้องการควบคุมการเข้าถึงข้อมูลตำแหน่งที่จัดเก็บไว้ใน Fleet Engine คุณต้องใช้บริการสร้างข้อมูลของ JSON Web Token (JWT) สำหรับ Fleet Engine บนเซิร์ฟเวอร์ของคุณ จากนั้นใช้ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เป็นส่วนหนึ่งของเว็บแอปพลิเคชัน โดยใช้ JavaScript SDK เพื่อตรวจสอบสิทธิ์การเข้าถึงข้อมูลตำแหน่ง
ตัวเลือกการจัดรูปแบบ
รูปแบบเครื่องหมายและเส้นประกอบจะกำหนดรูปลักษณ์ของวัตถุตำแหน่งที่ติดตามบนแผนที่ คุณใช้ตัวเลือกการจัดรูปแบบที่กำหนดเองเพื่อเปลี่ยนการจัดรูปแบบเริ่มต้นให้ตรงกับการจัดรูปแบบของเว็บแอปพลิเคชันได้
การควบคุมการเปิดเผยสถานที่ที่ติดตาม
ส่วนนี้จะอธิบายกฎการเปิดเผยสำหรับออบเจ็กต์ตำแหน่งที่ติดตามบนแผนที่สำหรับผู้ให้บริการตำแหน่งที่กำหนดไว้ล่วงหน้าของ Fleet Engine ผู้ให้บริการตำแหน่งที่กำหนดเองหรือที่ได้มาอาจเปลี่ยนแปลงกฎระดับการเข้าถึง
ยานพาหนะ
จะแสดงยานพาหนะร่วมเดินทางได้ตั้งแต่เวลาที่กำหนดการเดินทางไปจนถึงเวลาที่ต้องออกเดินทาง หากการเดินทางถูกยกเลิก ยานพาหนะจะแสดงให้เห็นนานขึ้น
เครื่องหมายระบุตำแหน่งอื่นๆ ทั้งหมด
เครื่องหมายตำแหน่งอื่นๆ ทั้งหมดสำหรับต้นทาง จุดหมาย และจุดอ้างอิงจะแสดงบนแผนที่เสมอ เช่น ตำแหน่งส่งรถโดยสารหรือตำแหน่งสำหรับนำส่งพัสดุจะแสดงในแผนที่เสมอ โดยไม่คำนึงถึงสถานะของการเดินทางหรือการนำส่ง
เริ่มต้นใช้งาน JavaScript SDK
ก่อนใช้ JavaScript SDK โปรดทำความคุ้นเคยกับ Fleet Engine และการรับคีย์ API
หากต้องการติดตามการเดินทางโดยการแชร์รถ ให้สร้างการอ้างสิทธิ์รหัสการเดินทางก่อน
สร้างการอ้างสิทธิ์รหัสการเดินทาง
หากต้องการติดตามการเดินทางโดยใช้ผู้ให้บริการตำแหน่งการเดินทาง ให้สร้าง JSON Web Token (JWT) ที่มีการอ้างสิทธิ์รหัสการเดินทาง
ในการสร้างเปย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ด้วย tripid คีย์ แล้วกำหนดค่าเป็นรหัสการเดินทาง
ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นสําหรับการติดตามตามรหัสการเดินทาง
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "tid_12345",
}
}
สร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์
คุณสามารถสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เพื่อเรียกโทเค็นที่สร้างพร้อมการอ้างสิทธิ์ที่เหมาะสมบนเซิร์ฟเวอร์ของคุณโดยใช้ใบรับรองบัญชีบริการสำหรับโปรเจ็กต์ของคุณ สิ่งสำคัญคือคุณจะต้องสร้างโทเค็นที่สร้างไว้ในเซิร์ฟเวอร์เท่านั้น และอย่าแชร์ใบรับรองกับไคลเอ็นต์ใดเลย มิฉะนั้น คุณอาจไม่ปลอดภัยสำหรับระบบของคุณ
ตัวดึงข้อมูลต้องแสดงผลโครงสร้างข้อมูลที่มี 2 ช่องซึ่งอยู่ใน "คำสัญญา" ดังนี้
- สตริง
token
- หมายเลข
expiresInSeconds
โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจากการดึงข้อมูล
JavaScript Consumer SDK จะขอโทเค็นผ่านตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เมื่อสิ่งต่อไปนี้เป็นจริง
- เซิร์ฟเวอร์ไม่มีโทเค็นที่ถูกต้อง เช่น เมื่อไม่ได้เรียก Fetcher ในการโหลดหน้าเว็บใหม่ หรือเมื่อตัวดึงข้อมูลไม่แสดงผลพร้อมโทเค็น
- โทเค็นที่ดึงข้อมูลมาก่อนหน้านี้หมดอายุแล้ว
- โทเค็นที่ดึงข้อมูลก่อนหน้านี้ยังอยู่ในช่วง 1 นาทีที่จะหมดอายุ
ไม่เช่นนั้น SDK จะใช้โทเค็นที่ออกให้ก่อนหน้านี้ ที่ยังใช้งานได้อยู่ และจะไม่เรียกใช้ตัวดึงข้อมูล
ตัวอย่างต่อไปนี้แสดงวิธีสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์
JavaScript
async 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.jwt,
expiresInSeconds: data.expirationTimestamp - Date.now(),
};
}
เมื่อคุณใช้ปลายทางฝั่งเซิร์ฟเวอร์ในการสร้างโทเค็น โปรดคำนึงถึงสิ่งต่อไปนี้
- ปลายทางต้องแสดงผลเวลาหมดอายุสำหรับโทเค็น ในตัวอย่างด้านบน ค่านี้กำหนดเป็น
data.ExpiresInSeconds
- ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์ต้องส่งเวลาหมดอายุ (เป็นวินาทีนับจากเวลาดึงข้อมูล) ไปยังไลบรารีดังที่แสดงในตัวอย่าง
- SERVER_TOKEN_URL ขึ้นอยู่กับการใช้งานของผู้ให้บริการ ซึ่งได้แก่ URL สำหรับผู้ให้บริการตัวอย่าง
- https://
SERVER_URL
/token/driver/VEHICLEID
- https://
SERVER_URL
/token/consumer/TRIPID
- https://
โหลดแผนที่จาก HTML
ตัวอย่างต่อไปนี้แสดงวิธีโหลด JavaScript SDK จาก URL ที่ระบุ พารามิเตอร์ callback จะทํางานฟังก์ชัน initMap
หลังจากโหลด API แอตทริบิวต์ defer จะช่วยให้เบราว์เซอร์แสดงผล
ส่วนที่เหลือของหน้าเว็บต่อไปได้ขณะที่ API โหลดอยู่
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
กำลังติดตามการเดินทาง
ส่วนนี้จะแสดงวิธีใช้ JavaScript SDK เพื่อติดตามการเดินทางโดยการแชร์รถโดยสารหรือบริการจัดส่ง อย่าลืมโหลดไลบรารีจากฟังก์ชัน Callback ที่ระบุในแท็กสคริปต์ก่อนเรียกใช้โค้ด
สร้างตัวอย่างผู้ให้บริการสถานที่เดินทาง
JavaScript SDK กำหนดผู้ให้บริการตำแหน่งล่วงหน้าสำหรับ Fleet Engine Ridesharing API ใช้รหัสโปรเจ็กต์และการอ้างอิงกับโรงงานโทเค็นเพื่อสร้างอินสแตนซ์
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
เริ่มต้นมุมมองแผนที่
หลังจากโหลด JavaScript SDK แล้ว ให้เริ่มต้นมุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมีเอลิเมนต์ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างด้านล่าง
เพื่อหลีกเลี่ยงเงื่อนไขการแข่งขัน ให้ตั้งรหัสการเดินทางสำหรับผู้ให้บริการตำแหน่งในการเรียกกลับที่เรียกใช้หลังจากเริ่มต้นแผนที่แล้ว
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
ฟังเหตุการณ์การเปลี่ยนแปลง
คุณดึงข้อมูลเมตาเกี่ยวกับการเดินทางจากออบเจ็กต์งานได้โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตารวมถึงเวลาถึงโดยประมาณและระยะทางที่เหลือก่อนไปรับหรือส่งสินค้า การเปลี่ยนแปลงข้อมูลเมตาจะทริกเกอร์เหตุการณ์ update ตัวอย่างต่อไปนี้แสดงวิธีฟังเหตุการณ์การเปลี่ยนแปลงเหล่านี้
JavaScript
locationProvider.addListener('update', e => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
TypeScript
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
จัดการข้อผิดพลาด
ข้อผิดพลาดที่เกิดขึ้นไม่พร้อมกันจากการขอข้อมูลการเดินทางจะทำให้เกิดเหตุการณ์ข้อผิดพลาด ตัวอย่างต่อไปนี้แสดงวิธีจับเหตุการณ์เหล่านี้ เพื่อจัดการข้อผิดพลาด
JavaScript
locationProvider.addListener('error', e => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
หมายเหตุ: อย่าลืมรวมการเรียกไลบรารีไว้ในบล็อก try...catch
เพื่อจัดการข้อผิดพลาดที่ไม่คาดคิด
หยุดติดตาม
หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามการเดินทาง ให้นำรหัสการเดินทางออกจากผู้ให้บริการตำแหน่ง
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
การปรับแต่งรูปลักษณ์ของแผนที่ฐาน
หากต้องการปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่ จัดรูปแบบแผนที่ โดยใช้เครื่องมือในระบบคลาวด์หรือโดยตั้งค่าตัวเลือกในโค้ดโดยตรง
การใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
การจัดรูปแบบแผนที่ในระบบคลาวด์ช่วยให้คุณสร้างและแก้ไขรูปแบบแผนที่สำหรับแอปใดก็ตามที่ใช้ Google Maps ได้จากคอนโซล Google Cloud โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย
ระบบจะบันทึกรูปแบบแผนที่เป็นรหัสแผนที่ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ หากต้องการใช้รูปแบบกับแมป JavaScript SDK ให้ระบุ mapId
และ mapOptions
อื่นๆ เมื่อคุณสร้าง JourneySharingMapView
คุณจะเปลี่ยนหรือเพิ่มช่อง mapId
ไม่ได้หลังจากสร้างอินสแตนซ์ JourneySharingMapView
แล้ว ตัวอย่างต่อไปนี้แสดงวิธีเปิดใช้รูปแบบแผนที่ที่สร้างไว้ก่อนหน้านี้ด้วยรหัสแผนที่
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
ใช้การจัดรูปแบบแผนที่ตามโค้ด
อีกวิธีในการปรับแต่งรูปแบบแผนที่คือการตั้งค่า 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 SDK ช่วยให้คุณปรับแต่งรูปลักษณ์ของเครื่องหมายที่เพิ่มลงในแผนที่ได้ ซึ่งทำได้โดยการระบุการปรับแต่งเครื่องหมาย ซึ่งจะนำ JavaScript SDK ไปใช้ก่อนเพิ่มเครื่องหมายลงในแผนที่และอัปเดตเครื่องหมายทุกครั้ง
การปรับแต่งที่ง่ายที่สุดคือการระบุออบเจ็กต์ MarkerOptions
ที่จะนำไปใช้กับเครื่องหมายทั้งหมดที่อยู่ในประเภทเดียวกัน การเปลี่ยนแปลงที่ระบุในออบเจ็กต์จะมีผลหลังจากสร้างตัวทำเครื่องหมายแต่ละรายการแล้ว โดยจะเขียนทับตัวเลือกเริ่มต้น
ตัวเลือกขั้นสูงขึ้นสำหรับการระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่งทำให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูล รวมถึงเพิ่มการโต้ตอบลงในตัวทำเครื่องหมาย เช่น การจัดการคลิก โดยเฉพาะอย่างยิ่ง ความคืบหน้าการเดินทางและคำสั่งซื้อจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทของวัตถุที่เครื่องหมายแสดง เช่น ยานพาหนะ ต้นทาง จุดอ้างอิง หรือจุดหมาย ซึ่งจะทำให้การจัดรูปแบบเครื่องหมายเปลี่ยนแปลงไปตามสถานะปัจจุบันขององค์ประกอบของเครื่องหมายเอง ตัวอย่างเช่น จำนวนของจุดอ้างอิงที่เหลือจนกว่ารถจะเดินทางจบ คุณยังผนวกกับข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูลดังกล่าวได้ด้วย
JavaScript SDK มีพารามิเตอร์การปรับแต่งต่อไปนี้ใน FleetEngineTripLocationProviderOptions
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
เปลี่ยนรูปแบบเครื่องหมายโดยใช้ MarkerOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะด้วยออบเจ็กต์ MarkerOptions
ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของเครื่องหมายโดยใช้การกำหนดค่าเครื่องหมายใดๆ ที่แสดงอยู่ก่อนหน้านี้
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
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.
});
}
};
ใช้การปรับแต่งเส้นประกอบ
JavaScript SDK ช่วยให้คุณสามารถปรับแต่งรูปลักษณ์ของเส้นทางการเดินทางบนแผนที่ ไลบรารีจะสร้างออบเจ็กต์ google.maps.Polyline
สำหรับพิกัดแต่ละคู่ในเส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ของรถ
คุณจัดรูปแบบออบเจ็กต์ Polyline
ได้โดยการระบุการปรับแต่งเส้นประกอบ จากนั้นไลบรารีจะใช้การกำหนดค่าเหล่านี้ใน 2 สถานการณ์ ได้แก่ ก่อนเพิ่มออบเจ็กต์ลงในแผนที่ และเมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง
คุณกำหนดชุดของ PolylineOptions
ให้ใช้กับออบเจ็กต์ Polyline
ที่ตรงกันทั้งหมดเมื่อสร้างหรืออัปเดตวัตถุได้ ซึ่งคล้ายกับการปรับแต่งเครื่องหมาย
ในทำนองเดียวกัน คุณสามารถระบุฟังก์ชันการกำหนดเองได้ ฟังก์ชันการปรับแต่งช่วยให้สามารถจัดรูปแบบออบเจ็กต์แต่ละรายการตามข้อมูลที่ส่งโดย Fleet Engine
ฟังก์ชันนี้จะเปลี่ยนรูปแบบของวัตถุแต่ละรายการได้โดยอิงตามสถานะปัจจุบันของยานพาหนะ เช่น การให้สีวัตถุ Polyline
เป็นเฉดสีที่ลึกขึ้น หรือทำให้วัตถุหนาขึ้นเมื่อพาหนะเคลื่อนที่ช้าลง คุณยังเข้าร่วมกับแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบออบเจ็กต์ Polyline
โดยอิงตามข้อมูลดังกล่าวได้ด้วย
คุณระบุการปรับแต่งได้โดยใช้พารามิเตอร์ที่มีให้ใน FleetEngineTripLocationProviderOptions
คุณสามารถตั้งค่ากำหนดสถานะเส้นทางต่างๆ ในการเดินทางของรถ เช่น เดินทางแล้ว กำลังเดินทาง หรือยังไม่ได้เดินทาง โดยมีพารามิเตอร์ดังนี้
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.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 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
รายการ หากต้องการทำให้ออบเจ็กต์ 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 =
FleetEngineTripLocationProvider.
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) => {
FleetEngineTripLocationProvider.
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 =
FleetEngineTripLocationProvider.
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: TripPolylineCustomizationFunctionParams) => {
FleetEngineTripLocationProvider.
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});
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,
...
});
แทนที่แผนที่ที่มีอยู่
คุณสามารถใช้ JavaScript SDK เพื่อแทนที่แผนที่ที่มีอยู่ซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ โดยไม่สูญเสียการปรับแต่งเหล่านั้น
ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มีเอนทิตี 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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, 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 SDK
- เพิ่มโค้ดที่ใช้เป็นค่าเริ่มต้นสำหรับโทเค็นการตรวจสอบสิทธิ์
- เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน
initMap()
- เริ่มต้นมุมมองแผนที่ในฟังก์ชัน
initMap()
มุมมองนี้มีแผนที่ - ย้ายการปรับแต่งของคุณลงในฟังก์ชัน Callback สำหรับการเริ่มต้นมุมมองแผนที่
- เพิ่มไลบรารีตำแหน่งลงในตัวโหลด 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
async 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.
locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: "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
});
locationProvider.tripId = TRIP_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, 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 SDK to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
หากคุณจัดการการเดินทางโดยใช้รหัสที่ระบุไว้ใกล้กับ Uluru ตอนนี้แผนที่จะแสดงแผนที่