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

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

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

ผลิตภัณฑ์หรือฟีเจอร์นี้อยู่ในเวอร์ชันตัวอย่าง (ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไป) ผลิตภัณฑ์และฟีเจอร์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอาจมีการรองรับอย่างจำกัด และการเปลี่ยนแปลงในผลิตภัณฑ์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปและ อาจใช้ไม่ได้กับเวอร์ชันก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอื่นๆ ข้อเสนอก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไปอยู่ภายใต้ ข้อกำหนดเฉพาะของบริการ Maps Platform สำหรับข้อมูลเพิ่มเติม โปรดดู ช่วงเปิดตัว คำอธิบาย

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 โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจาก การดึงข้อมูล

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

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/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 ใช้รหัสโปรเจ็กต์และการอ้างอิงไปยัง โรงงานโทเค็นเพื่อสร้างอินสแตนซ์

JavaScript

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

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

TypeScript

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 หน้าควรมีเอลิเมนต์ <div> ที่ถือมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า <div> ใน ตัวอย่างด้านล่าง

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

TypeScript

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 ตัวอย่างต่อไปนี้แสดงวิธีฟัง กับเหตุการณ์การเปลี่ยนแปลงเหล่านี้

JavaScript

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

TypeScript

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

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

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

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.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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

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

JavaScript

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"',
        });

TypeScript

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 ให้ตรงกับพื้นที่ที่แสดงใน มุมมองแผนที่

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

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

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

JavaScript

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

TypeScript

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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

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

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

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

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

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

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

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

TypeScript

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

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

TypeScript

// 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 พร็อพเพอร์ตี้:

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

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 =
  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 และแนบไฟล์กับ เครื่องหมายระบุตำแหน่งรถ

JavaScript

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

TypeScript

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

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

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

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

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

ติดตามกลุ่มอุปกรณ์ของคุณด้วยไลบรารีการติดตามกลุ่ม 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

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

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

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

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

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

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

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