JavaScript SDK ช่วยให้คุณเห็นภาพตำแหน่ง
ของยานพาหนะและสถานที่ที่สนใจที่มีการติดตามใน Fleet Engine ห้องสมุด
มีคอมโพเนนต์แผนที่ JavaScript ที่เป็นการแทนที่แบบดร็อปอิน
สำหรับเอนทิตี google.maps.Map
มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อเชื่อมต่อ
ด้วย Fleet Engine การใช้ JavaScript SDK
คุณสามารถมอบประสบการณ์การเดินทางที่ปรับแต่งได้และความคืบหน้าของคำสั่งซื้อจากเว็บแอปพลิเคชันของคุณ
คอมโพเนนต์
JavaScript SDK มีคอมโพเนนต์สำหรับการแสดงภาพ ของยานพาหนะและจุดอ้างอิง รวมถึงฟีดข้อมูลดิบสำหรับ ETA ของผู้ขับ หรือระยะทางที่เหลือในการขับรถ
มุมมองแผนที่ความคืบหน้าในการเดินทางและคำสั่งซื้อ
คอมโพเนนต์มุมมองแผนที่จะแสดงตำแหน่งของยานพาหนะและจุดอ้างอิง หากทราบเส้นทางสำหรับยานพาหนะ คอมโพเนนต์มุมมองแผนที่จะเคลื่อนไหว พร้อมขับไปตามเส้นทางที่คาดการณ์ไว้
ผู้ให้บริการตำแหน่งการเดินทาง
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",
}
}
สร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์
คุณสามารถสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เพื่อเรียกข้อมูลโทเค็นที่สร้าง ด้วยการอ้างสิทธิ์ที่เหมาะสมในเซิร์ฟเวอร์ของคุณโดยใช้บริการ ใบรับรองบัญชีสำหรับโปรเจ็กต์ของคุณ สิ่งสำคัญคือต้องสร้างเฉพาะโทเค็นสร้าง (Mint) เท่านั้น บนเซิร์ฟเวอร์และอย่าแชร์ใบรับรองกับไคลเอ็นต์ใดเลย หรือไม่เช่นนั้น คุณจะโจมตีความปลอดภัยของระบบได้
ตัวดึงข้อมูลต้องแสดงผลโครงสร้างข้อมูล ด้วยฟิลด์ 2 ฟิลด์ ไว้ในคำสัญญา:
- สตริง
token
- หมายเลข
expiresInSeconds
โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจาก การดึงข้อมูล
JavaScript Consumer SDK จะขอโทเค็นผ่านโทเค็นการตรวจสอบสิทธิ์ ตัวดึงข้อมูลเมื่อเป็นไปตามเงื่อนไขใดๆ ต่อไปนี้
- อุปกรณ์ไม่มีโทเค็นที่ถูกต้อง เช่น เมื่อไม่ได้เรียกตัวดึงข้อมูลใน การโหลดหน้าเว็บใหม่หรือเมื่อตัวดึงข้อมูลไม่ได้แสดงผลพร้อมโทเค็น
- โทเค็นที่ดึงข้อมูลมาก่อนหน้านี้หมดอายุแล้ว
- โทเค็นที่ดึงข้อมูลก่อนหน้านี้ยังอยู่ในช่วง 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);
ฟังเหตุการณ์การเปลี่ยนแปลง
คุณเรียกข้อมูลเมตาเกี่ยวกับการเดินทางจากออบเจ็กต์งานได้ โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาประกอบด้วย ETA และ ระยะทางที่เหลือก่อนไปรับหรือส่งสินค้า การเปลี่ยนแปลงข้อมูลเมตา เรียกใช้เหตุการณ์ 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
ที่จะใช้กับเครื่องหมายทั้งหมดที่อยู่ในประเภทเดียวกัน การเปลี่ยนแปลง
ที่ระบุในอ็อบเจกต์จะถูกนำไปใช้หลังจากที่สร้างตัวทำเครื่องหมายแต่ละตัวแล้ว
โดยจะเขียนทับตัวเลือกเริ่มต้น
ตัวเลือกขั้นสูงขึ้นสำหรับการระบุฟังก์ชันการปรับแต่ง การปรับแต่งช่อง ทำให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูล รวมถึงเพิ่ม การโต้ตอบกับตัวทำเครื่องหมาย เช่น การจัดการคลิก โดยเฉพาะอย่างยิ่ง Trip and Order ความคืบหน้าจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทของออบเจ็กต์ เครื่องหมายแสดงถึงยานพาหนะ ต้นทาง จุดอ้างอิง หรือจุดหมาย ซึ่งจะทำให้ การจัดรูปแบบเครื่องหมายที่จะเปลี่ยนแปลงตามสถานะปัจจุบันขององค์ประกอบเครื่องหมาย ด้วยตนเอง เช่น จำนวนจุดอ้างอิงที่เหลือจนกว่ารถจะจบ การเดินทางครั้งนั้น คุณยังผนวกกับข้อมูลจากแหล่งที่มาภายนอก 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 แล้ว รหัสก็จะแสดงบนแผนที่