ขณะนี้โซลูชัน Fleet Fleet พร้อมให้บริการแก่ลูกค้าบางรายเท่านั้น ติดต่อฝ่ายขายเพื่อดูข้อมูลเพิ่มเติม

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

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

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

คอมโพเนนต์

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

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

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

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

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

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

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

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

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

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

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

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

รถส่งของ

ยานพาหนะนำส่งจะแสดงทันทีที่สร้างใน Fleet Engine และมองเห็นได้ตลอดเส้นทาง ไม่ว่าจะทำงานอะไรก็ตาม

เครื่องหมายสถานที่ของงาน

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

ระบบจะแสดงตำแหน่งของผลลัพธ์งานพร้อมกับตัวทำเครื่องหมายผลลัพธ์ของงาน งานที่มีผลลัพธ์ SUCCEEDED จะแสดงพร้อมตัวทำเครื่องหมายงานที่สำเร็จ ขณะที่งานอื่นๆ ทั้งหมดจะแสดงพร้อมกับตัวทำเครื่องหมายงานที่ไม่สำเร็จ

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

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

สร้างรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะที่นำส่ง

หากต้องการติดตามยานพาหนะที่นำส่งโดยใช้ผู้ให้บริการตำแหน่งยานพาหนะสำหรับนำส่ง สร้าง JSON Web Token (JWT) ที่มีรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะที่นำส่ง

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

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

{
  "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": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

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

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

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

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

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

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

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

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

JavaScript

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.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

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

ปลายทางต้องแสดงเวลาหมดอายุสำหรับโทเค็น ในตัวอย่าง ข้างต้นจะถือว่าเป็น data.ExpiresInSeconds
ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์จะต้องผ่านเวลาหมดอายุ (เป็นวินาที ตั้งแต่เวลาดึงข้อมูล) ไปยังไลบรารี ดังที่แสดงในตัวอย่าง
SERVER_TOKEN_URL ขึ้นอยู่กับการใช้งานแบ็กเอนด์ของคุณ นี่คือ URL สำหรับตัวอย่างแบ็กเอนด์ของแอป
- https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://SERVER_URL/token/delivery_consumer/TRACKING_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" defer></script>

ติดตามยานพาหนะที่นำส่งสินค้า

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

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

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

JavaScript

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

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

TypeScript

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

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

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

หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript แล้ว ให้เริ่มต้น มุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมี องค์ประกอบ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างด้านล่าง

JavaScript

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 delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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);

TypeScript

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 delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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);

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

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

TypeScript

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

หยุดติดตาม

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ดูกลุ่มอุปกรณ์นำส่ง

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

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

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

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

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

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

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

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

TypeScript

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

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

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

หยุดติดตาม

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ติดตามรถส่งของขณะดูกลุ่มรถส่งของ

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

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

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

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

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

JavaScript

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

JavaScript

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

TypeScript

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

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

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

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

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

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

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

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

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

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

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

takenPolylineCustomization สำหรับเส้นทางที่เดินทางแล้ว
activePolylineCustomization สำหรับเส้นทางการเดินทางที่กระตือรือร้น
remainingPolylineCustomization สำหรับเส้นทางที่ยังไม่ได้เดินทาง

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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};

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

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

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

JavaScript

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

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

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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,
  ...
});

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

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

ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มี 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, 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 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 Journey Share ซึ่งรวมถึง Fleet Tracking

เพิ่มโค้ดที่ใช้เป็นค่าเริ่มต้นของโทเค็นการตรวจสอบสิทธิ์
เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน 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
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 FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 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 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">
    </script>
  </body>
</html>

หากคุณใช้รถนำส่งสินค้า ใกล้ Uluru แล้ว รหัสก็จะแสดงบนแผนที่

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

คอมโพเนนต์

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

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

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

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

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

รถส่งของ

เครื่องหมายสถานที่ของงาน

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

สร้างรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะที่นำส่ง

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

JavaScript

TypeScript

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

ติดตามยานพาหนะที่นำส่งสินค้า

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

หยุดติดตาม

JavaScript

TypeScript

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

JavaScript

TypeScript

ดูกลุ่มอุปกรณ์นำส่ง

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

หยุดติดตาม

JavaScript

TypeScript

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

JavaScript

TypeScript

ติดตามรถส่งของขณะดูกลุ่มรถส่งของ

JavaScript

TypeScript

JavaScript

TypeScript

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

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

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

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

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

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