การเริ่มต้นใช้งาน Consumer SDK สําหรับ JavaScript

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 ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ด้วยคีย์ทริปิด แล้วตั้งค่าเป็นรหัสการเดินทาง

ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นสําหรับการติดตามตามรหัสการเดินทาง

{
  "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 จะขอโทเค็นผ่านตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เมื่อข้อใดข้อหนึ่งต่อไปนี้เป็นจริง

  • ไม่มีโทเค็นที่ถูกต้อง เช่น ในกรณีที่ไม่ได้เรียกใช้ Fetcher ในการโหลดหน้าเว็บใหม่ หรือเมื่อ Googlebot ไม่ได้ส่งโทเค็นกลับมา
  • โทเค็นที่ดึงข้อมูลไว้ก่อนหน้านี้หมดอายุแล้ว
  • โทเค็นที่ดึงข้อมูลก่อนหน้านี้จะปรากฏภายใน 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

โหลดแผนที่จาก 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 เพื่อติดตามบริการร่วมเดินทางหรือการนำส่ง อย่าลืมโหลดไลบรารีจากฟังก์ชันเรียกกลับที่ระบุในแท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด

สร้างอินสแตนซ์ผู้ให้บริการสถานที่ของการเดินทาง

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);

ฟังเหตุการณ์การเปลี่ยนแปลง

คุณเรียกข้อมูลเมตาเกี่ยวกับการเดินทางจากออบเจ็กต์งานได้โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาจะระบุเวลาถึงโดยประมาณและระยะทางที่เหลืออยู่ก่อนเวลาไปรับหรือส่งคืน การเปลี่ยนแปลงข้อมูลเมตาจะทริกเกอร์เหตุการณ์อัปเดต ตัวอย่างต่อไปนี้แสดงวิธีฟังเหตุการณ์การเปลี่ยนแปลงเหล่านี้

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

เปลี่ยนรูปแบบของเครื่องหมายโดยใช้ 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 คุณสามารถตั้งค่าการกำหนดค่าสำหรับสถานะเส้นทางต่างๆ ในเส้นทางของรถได้ กล่าวคือ เดินทางแล้ว เดินทางแล้ว หรือยังไม่ได้เดินทาง พารามิเตอร์มีดังนี้

เปลี่ยนการจัดรูปแบบของวัตถุ 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

  1. เพิ่มโค้ดสำหรับต้นทางโทเค็นการตรวจสอบสิทธิ์
  2. เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน initMap()
  3. เริ่มต้นมุมมองแผนที่ในฟังก์ชัน initMap() มุมมองที่มีแผนที่
  4. ย้ายการปรับแต่งไปไว้ในฟังก์ชันเรียกกลับสำหรับการเริ่มต้นมุมมองแผนที่
  5. เพิ่มไลบรารีตำแหน่งลงในตัวโหลด 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