ติดตามกลุ่มอุปกรณ์ของคุณด้วยไลบรารีการติดตามกลุ่ม JavaScript

JavaScript Fleet Tracking Library ช่วยให้คุณเห็นภาพตำแหน่งของ ยานพาหนะในยานพาหนะของคุณได้แบบเกือบเรียลไทม์ ไลบรารีใช้รูปแบบโฆษณาออนดีมานด์ การโดยสารและการนำส่ง API เพื่อช่วยให้เห็นภาพยานพาหนะและการเดินทาง กลุ่ม JavaScript ไลบรารีการติดตามมีคอมโพเนนต์แผนที่ JavaScript ที่เป็นดรอปอิน การแทนที่เอนทิตี google.maps.Map มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อ เชื่อมต่อกับ Fleet Engine

JavaScript Fleet Tracking Library จัดเตรียมองค์ประกอบไว้สำหรับการแสดงภาพของ ยานพาหนะและจุดอ้างอิงสำหรับการเดินทาง รวมถึงฟีดข้อมูลดิบสำหรับเวลาถึงโดยประมาณหรือเหลืออยู่ ตลอดการเดินทาง

มุมมองแผนที่การติดตามยานพาหนะ

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

มุมมองแผนที่การติดตามยานพาหนะ
ตัวอย่าง

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

ผู้ให้บริการตำแหน่งทำงานกับข้อมูลที่เก็บไว้ใน Fleet Engine เพื่อส่งตำแหน่ง ของออบเจ็กต์ที่ติดตามลงในแผนที่การแชร์เส้นทาง

ผู้ให้บริการตำแหน่งของรถ

ผู้ให้บริการตำแหน่งของรถจะแสดงข้อมูลตำแหน่งของรถคันเดียว ซึ่งมีข้อมูลเกี่ยวกับตำแหน่งของรถและการเดินทางปัจจุบันที่กำหนดให้กับ ยานพาหนะ

ผู้ให้บริการตำแหน่งยานพาหนะ

ผู้ให้บริการตำแหน่งยานพาหนะจะแสดงข้อมูลตำแหน่งของยานพาหนะหลายคัน คุณสามารถกรองให้แสดงยานพาหนะที่ต้องการและตำแหน่ง หรือ แสดงตำแหน่งของยานพาหนะทั้งหมด

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

กฎระดับการเข้าถึงกำหนดว่าออบเจ็กต์ตำแหน่งที่ติดตามจะปรากฏบนแผนที่เมื่อใด สำหรับผู้ให้บริการตำแหน่ง Fleet Engine หมายเหตุ - การใช้ตำแหน่งที่กำหนดเองหรือที่ดึงมา สามารถเปลี่ยนกฎระดับการเข้าถึงได้

ยานพาหนะ

ยานพาหนะจะปรากฏทันทีที่สร้างใน Fleet Engine และแสดงให้เห็น เมื่อยานพาหนะ_stateคือ Online ซึ่งหมายความว่ามองเห็นยานพาหนะได้แม้ เมื่อไม่ได้กำหนดการเดินทางปัจจุบันให้กับยานพาหนะดังกล่าว

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

เครื่องหมายระบุตำแหน่งบนเส้นทางจะแสดงจุดต่างๆ ตลอดการเดินทางของยานพาหนะที่เริ่มต้น ที่มีต้นทางและลงท้ายด้วยปลายทางสุดท้าย ตำแหน่งการชี้ทาง สามารถกำหนดสิ่งต่อไปนี้:

  • ต้นทาง - ระบุตำแหน่งเริ่มต้นสำหรับการเดินทางด้วยยานพาหนะ
  • ระดับกลาง - ระบุการแวะพักสำหรับการเดินทางด้วยยานพาหนะ
  • ปลายทาง - ระบุตำแหน่งสุดท้ายสำหรับการเดินทางด้วยยานพาหนะ

จุดอ้างอิงยานพาหนะที่วางแผนไว้จะแสดงบนแผนที่เป็นต้นทาง ระดับกลาง และ ตัวทำเครื่องหมายปลายทาง

เริ่มต้นใช้งานไลบรารีการติดตามกลุ่ม JavaScript

ก่อนที่จะใช้ไลบรารีการติดตามกลุ่ม JavaScript โปรดแน่ใจว่าคุณคุ้นเคยกับ ด้วย Fleet Engine และการรับ API จากนั้นสร้างรหัสการเดินทางและการอ้างสิทธิ์รหัสยานพาหนะ

สร้างรหัสการเดินทางและการอ้างสิทธิ์รหัสยานพาหนะ

เพื่อติดตามยานพาหนะโดยใช้ตำแหน่งของยานพาหนะ provider สร้าง JSON Web Token (JWT) ที่มีการเดินทาง การอ้างสิทธิ์รหัสยานพาหนะและบัตรประจำตัว

ในการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ ด้วยคีย์ tripid และ vehicleid และตั้งค่า value ของแต่ละคีย์เป็น * โทเค็นควรสร้างโดยใช้ระบบคลาวด์ของ Fleet Engine Service Super User บทบาท IAM โปรดทราบว่าตัวเลือกนี้ให้สิทธิ์แบบกว้างในการสร้าง อ่าน และแก้ไข Fleet เอนทิตีเครื่องมือค้นหา และควรแชร์กับผู้ใช้ที่เชื่อถือได้เท่านั้น

ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นเพื่อติดตามตามยานพาหนะและ งาน:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

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

JavaScript Fleet Tracking Library ขอโทเค็นโดยใช้การตรวจสอบสิทธิ์ ตัวดึงข้อมูลโทเค็นเมื่อรายการใดรายการหนึ่งต่อไปนี้เป็นจริง

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

ไม่เช่นนั้น ไลบรารีจะใช้โทเค็นที่ออกให้ก่อนหน้านี้ ยังใช้งานได้อยู่และ ไม่เรียกใช้ตัวดึงข้อมูล

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

ตัวดึงข้อมูลต้องส่งคืน ข้อมูล โครงสร้าง ด้วยฟิลด์ 2 ฟิลด์ ไว้ในคำสัญญา:

  • สตริง token
  • หมายเลข expiresInSeconds โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจาก การดึงข้อมูล

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

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

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

เมื่อใช้งานปลายทางฝั่งเซิร์ฟเวอร์สำหรับการสร้างโทเค็น ให้เก็บ ดังต่อไปนี้

  • ปลายทางต้องแสดงเวลาหมดอายุสำหรับโทเค็น ในตัวอย่างข้างต้น จะได้รับเป็น data.ExpiresInSeconds
  • ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์จะต้องผ่านเวลาหมดอายุ (เป็นวินาทีนับจาก เวลาดึงข้อมูล) ไปยังไลบรารี ดังที่แสดงในตัวอย่าง
  • SERVER_TOKEN_URL ขึ้นอยู่กับการติดตั้งใช้งานแบ็กเอนด์ ซึ่งได้แก่ URL ตัวอย่าง:
    • https://SERVER_URL/token/driver/VEHICLE_ID
    • https://SERVER_URL/token/consumer/TRIP_ID
    • https://SERVER_URL/token/fleet_reader

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

ตัวอย่างต่อไปนี้แสดงวิธีโหลดไลบรารีการแชร์เส้นทาง JavaScript จาก URL ที่ระบุ พารามิเตอร์ callback จะเรียกใช้ฟังก์ชัน initMap หลังจากที่ API โหลดขึ้น แอตทริบิวต์ defer จะช่วยให้เบราว์เซอร์แสดงผลต่อได้ ส่วนที่เหลือของหน้าเว็บขณะที่โหลด API

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

ติดตามยานพาหนะ

ส่วนนี้จะแสดงวิธีใช้ไลบรารีการติดตามกลุ่ม JavaScript เพื่อติดตาม ยานพาหนะ ตรวจสอบว่าได้โหลดไลบรารีจากฟังก์ชัน Callback ที่ระบุไว้ใน แท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด

สร้างตัวอย่างผู้ให้บริการตำแหน่งของรถ

JavaScript Fleet Tracking Library กำหนดผู้ให้บริการตำแหน่งสำหรับ On ไว้ล่วงหน้า Demand Rides and Deliveries API ใช้รหัสโปรเจ็กต์และการอ้างอิงไปยัง โรงงานโทเค็นเพื่อสร้างอินสแตนซ์

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

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

หลังจากโหลดไลบรารี JavaScript Journey Share แล้ว ให้เริ่มต้นมุมมองแผนที่ และเพิ่มลงในหน้า HTML หน้าควรมีเอลิเมนต์ &lt;div&gt; ที่ถือมุมมองแผนที่ องค์ประกอบ &lt;div&gt; มีชื่อว่า &lt;div&gt; ใน ตัวอย่างด้านล่าง

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

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

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

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

ฟังข้อผิดพลาด

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

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

หยุดติดตาม

หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามรถ ให้นำรหัสรถออก จากผู้ให้บริการตำแหน่ง

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

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

ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

ดูกลุ่มยานพาหนะ

ส่วนนี้จะแสดงวิธีใช้ไลบรารีการแชร์เส้นทาง JavaScript เพื่อดู ยานพาหนะ ตรวจสอบว่าได้โหลดไลบรารีจากฟังก์ชัน Callback แล้ว ที่ระบุในแท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด

สร้างอินสแตนซ์ผู้ให้บริการตำแหน่งยานพาหนะ

JavaScript Fleet Tracking Library ล่วงหน้ากำหนดผู้ให้บริการตำแหน่งที่ ดึงข้อมูลยานพาหนะหลายคันจาก On Demand Rides and Deliveries API ใช้ รหัสโปรเจ็กต์ รวมถึงการอ้างอิงไปยังตัวดึงข้อมูลโทเค็นเพื่อสร้างอินสแตนซ์

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter ระบุข้อความค้นหาที่ใช้กรองยานพาหนะที่แสดงบนแผนที่ ตัวกรองนี้จะส่งไปยัง Fleet Engine โดยตรง โปรดดู ListVehiclesRequest สำหรับรูปแบบที่รองรับ

locationRestriction จำกัดพื้นที่ในการแสดงยานพาหนะบนแผนที่ อีกทั้งยังควบคุมว่าการติดตามตำแหน่งทำงานอยู่หรือไม่ การติดตามตำแหน่ง จะไม่เริ่มทำงานจนกว่าจะตั้งค่านี้

เมื่อสร้างผู้ให้บริการตำแหน่งแล้ว เริ่มต้นแผนที่ใหม่

ตั้งค่าการจำกัดตำแหน่งโดยใช้วิวพอร์ตของแผนที่

สามารถกำหนดค่าขอบเขต locationRestriction ให้ตรงกับพื้นที่ที่แสดงใน มุมมองแผนที่

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

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

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

ฟังข้อผิดพลาด

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

หยุดติดตาม

หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามกลุ่มอุปกรณ์ ให้ตั้งค่าขอบเขตของ ผู้ให้บริการตำแหน่งเป็น Null

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

หากต้องการปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่ จัดรูปแบบ แผนที่โดยใช้ ระบบคลาวด์ หรือโดยการตั้งค่าตัวเลือกในโค้ดโดยตรง

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

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

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

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

อีกวิธีหนึ่งในการปรับแต่งรูปแบบแผนที่คือการตั้งค่า mapOptions เมื่อคุณสร้าง JourneySharingMapView

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

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

คุณสามารถสร้างการกำหนดค่าเองง่ายๆ ด้วยการระบุ MarkerOptions เพื่อใช้กับเครื่องหมายทั้งหมดในประเภทเดียวกัน การเปลี่ยนแปลงที่ระบุใน มีการใช้หลังจากสร้างเครื่องหมายแต่ละรายการแล้ว ซึ่งจะเป็นการเขียนทับค่าเริ่มต้น ตัวเลือก

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

นอกจากนี้ คุณยังสามารถใช้ฟังก์ชันการปรับแต่งเพื่อกรองการแสดงเครื่องหมายได้ โดยโทร setVisible(false) บนเครื่องหมาย

อย่างไรก็ตาม ด้วยเหตุผลด้านประสิทธิภาพ เราขอแนะนำให้คุณกรองตามโฆษณาเนทีฟ ในผู้ให้บริการตำแหน่ง เช่น FleetEngineFleetLocationProvider.vehicleFilter แต่หากต้องการฟังก์ชันการกรองเพิ่มเติม คุณก็ใช้ การกรองโดยใช้ฟังก์ชันการกำหนดค่า

ไลบรารีการติดตาม Fleet Tracking มีพารามิเตอร์ที่กำหนดเองดังนี้

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

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

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

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

กรองเครื่องหมายที่มองเห็นได้

ตัวอย่างต่อไปนี้แสดงวิธีกรองเครื่องหมายยานพาหนะที่จะแสดง ทำตามรูปแบบนี้เพื่อกรองเครื่องหมายโดยใช้การปรับแต่งเครื่องหมายตามต้องการ พารามิเตอร์ที่แสดงอยู่ด้านบน

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

ใช้การปรับแต่งโพลีไลน์เมื่อตามรถ

เมื่อใช้ไลบรารีการติดตาม Fleet คุณสามารถปรับแต่งรูปลักษณ์ของ เส้นทางของรถที่ติดตามบนแผนที่ ไลบรารีจะสร้าง google.maps.Polyline สำหรับพิกัดแต่ละคู่ในรถที่ใช้งานอยู่หรือที่เหลืออยู่ เส้นทาง คุณจัดรูปแบบออบเจ็กต์ Polyline ได้โดยการระบุการปรับแต่งโพลีไลน์ จากนั้น ไลบรารีจะใช้การปรับแต่งเหล่านี้ใน 2 สถานการณ์ ได้แก่ ก่อนที่จะเพิ่ม วัตถุบนแผนที่ และเมื่อข้อมูลที่ใช้สำหรับวัตถุมีการเปลี่ยนแปลง

เช่นเดียวกับการปรับแต่งเครื่องหมาย คุณสามารถระบุชุดของ PolylineOptions ที่จะใช้กับออบเจ็กต์ Polyline ที่ตรงกันทั้งหมดเมื่อ สร้างหรืออัปเดตแล้ว

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

คุณสามารถระบุการปรับแต่งโดยใช้พารามิเตอร์ที่มีให้ใน FleetEngineVehicleLocationProviderOptions คุณสามารถตั้งค่าการปรับแต่งสำหรับสถานะเส้นทางต่างๆ ใน การเดินทาง--เคยเดินทางแล้ว ตั้งใจเดินทาง หรือยังไม่ได้เดินทาง มีดังนี้

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

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline กับ PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้ ของการปรับแต่งเส้นประกอบที่แสดงไว้ก่อนหน้า

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

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

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าออบเจ็กต์ Polyline ที่ใช้งานอยู่ การจัดรูปแบบ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้พารามิเตอร์การปรับแต่งโพลีไลน์ใดๆ ที่แสดงอยู่ก่อนหน้านี้

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

โดยค่าเริ่มต้น ระบบจะแสดงวัตถุทั้งหมด Polyline รายการ วิธีสร้างวัตถุ Polyline ซ่อนตัว ตั้งค่า visible พร็อพเพอร์ตี้:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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

Fleet Engine จะแสดงผลข้อมูลความเร็วการจราจรสำหรับเส้นทางที่ใช้งานอยู่และเส้นทางที่เหลืออยู่ของ ยานพาหนะที่ติดตาม คุณใช้ข้อมูลนี้เพื่อจัดรูปแบบPolylineได้ ของวัตถุตามความเร็วของการจราจร:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

คุณสามารถใช้ InfoWindow เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง

ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow และแนบไฟล์กับ เครื่องหมายระบุตำแหน่งรถ

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

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

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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

คุณสามารถแทนที่แผนที่ที่มีอยู่ซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ ได้ โดยไม่สูญเสียการปรับแต่งเหล่านั้นไป

ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มี google.maps.Map มาตรฐาน เอนทิตีที่จะแสดงเครื่องหมาย:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

วิธีเพิ่มไลบรารี JavaScript Journey Share ซึ่งรวมถึง Fleet Tracking

  1. เพิ่มโค้ดที่ใช้เป็นค่าเริ่มต้นสำหรับโทเค็นการตรวจสอบสิทธิ์
  2. เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน initMap()
  3. เริ่มต้นมุมมองแผนที่ในฟังก์ชัน initMap() มุมมองประกอบด้วย แผนที่
  4. ย้ายการปรับแต่งของคุณลงในฟังก์ชัน Callback สำหรับมุมมองแผนที่ การเริ่มต้น
  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
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

หากคุณใช้งานยานพาหนะที่มีรหัสตามที่ระบุใกล้กับ Oracle Park ยานพาหนะดังกล่าวจะแสดงใน แผนที่