ในตอนนี้ โซลูชันออนดีมานด์และการนําส่งแบบออนดีมานด์พร้อมให้บริการแก่พาร์ทเนอร์บางรายเท่านั้น

หน้านี้ได้รับการแปลโดย Cloud Translation API

การเริ่มต้นใช้งาน 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 ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ด้วย 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

โหลดแผนที่จาก 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

เปลี่ยนรูปแบบเครื่องหมายโดยใช้ `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 ตอนนี้แผนที่จะแสดงแผนที่

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

คอมโพเนนต์

มุมมองแผนที่ความคืบหน้าในการเดินทางและคำสั่งซื้อ

ผู้ให้บริการตำแหน่งการเดินทาง

ออบเจ็กต์ตำแหน่งที่ติดตาม

ตำแหน่งต้นทาง

ตำแหน่งปลายทาง

ตำแหน่งจุดอ้างอิง

ตำแหน่งของรถ

ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

ตัวเลือกการจัดรูปแบบ

การควบคุมการเปิดเผยสถานที่ที่ติดตาม

ยานพาหนะ

เครื่องหมายระบุตำแหน่งอื่นๆ ทั้งหมด

เริ่มต้นใช้งาน JavaScript SDK

สร้างการอ้างสิทธิ์รหัสการเดินทาง

สร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

JavaScript

TypeScript

โหลดแผนที่จาก HTML

กำลังติดตามการเดินทาง

สร้างตัวอย่างผู้ให้บริการสถานที่เดินทาง

JavaScript

TypeScript

เริ่มต้นมุมมองแผนที่

JavaScript

TypeScript

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

JavaScript

TypeScript

จัดการข้อผิดพลาด

JavaScript

TypeScript

หยุดติดตาม

JavaScript

TypeScript

นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

JavaScript

TypeScript

การปรับแต่งรูปลักษณ์ของแผนที่ฐาน

การใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

JavaScript

TypeScript

ใช้การจัดรูปแบบแผนที่ตามโค้ด

JavaScript

TypeScript

ใช้การปรับแต่งเครื่องหมาย

เปลี่ยนรูปแบบเครื่องหมายโดยใช้ MarkerOptions

JavaScript

TypeScript

เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง

JavaScript

TypeScript

เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย

JavaScript

TypeScript

ใช้การปรับแต่งเส้นประกอบ

เปลี่ยนการจัดรูปแบบของวัตถุ Polyline โดยใช้ PolylineOptions

JavaScript

TypeScript

เปลี่ยนการจัดรูปแบบวัตถุ Polyline โดยใช้ฟังก์ชันการปรับแต่ง

JavaScript

TypeScript

ควบคุมการเปิดเผยของ Polyline ออบเจ็กต์

JavaScript

TypeScript

แสดงผลออบเจ็กต์ Polyline ที่อิงตามการจราจร

JavaScript

TypeScript

แสดง InfoWindow สำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง

JavaScript

TypeScript

ปิดใช้การปรับให้พอดีอัตโนมัติ

JavaScript

TypeScript

แทนที่แผนที่ที่มีอยู่

เปลี่ยนรูปแบบเครื่องหมายโดยใช้ `MarkerOptions`

เปลี่ยนการจัดรูปแบบของวัตถุ `Polyline` โดยใช้ `PolylineOptions`

เปลี่ยนการจัดรูปแบบวัตถุ `Polyline` โดยใช้ฟังก์ชันการปรับแต่ง

ควบคุมการเปิดเผยของ `Polyline` ออบเจ็กต์

แสดงผลออบเจ็กต์ `Polyline` ที่อิงตามการจราจร

แสดง `InfoWindow` สำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง