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

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

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

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

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

คอมโพเนนต์

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

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

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

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

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

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

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

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

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

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

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

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

ยานพาหนะ

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

เครื่องหมายระบุตำแหน่งของจุดอ้างอิง

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

ต้นทาง - ระบุตำแหน่งต้นทางของการเดินทางโดยใช้ยานพาหนะ
ระดับกลาง - บ่งบอกถึงการแวะพักของยานพาหนะ
ปลายทาง - ระบุตำแหน่งสุดท้ายของการเดินทางโดยใช้ยานพาหนะ

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

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

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

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

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

หากต้องการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ด้วยคีย์ tripid และ vehicleid และตั้งค่า value ของแต่ละคีย์เป็น * โทเค็นควรสร้างโดยใช้บทบาท Cloud IAM Fleet Engine Service โปรดทราบว่าการดำเนินการนี้จะให้สิทธิ์เข้าถึงในวงกว้างเพื่อสร้าง อ่าน และแก้ไขเอนทิตี 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": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

สร้างตัวเรียกโทเค็นการตรวจสอบสิทธิ์

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

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

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

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

ตัวดึงข้อมูลต้องส่งคืนโครงสร้างข้อมูลที่มี 2 ช่องซึ่งรวมอยู่ใน Promise ดังนี้

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

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

ไลบรารีการติดตามยานพาหนะของ JavaScript จะกำหนดผู้ให้บริการตำแหน่งไว้ล่วงหน้าสำหรับ 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',
});

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

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

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

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

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

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

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

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

ไลบรารีการติดตามยานพาหนะมีพารามิเตอร์การปรับแต่งต่อไปนี้

เปลี่ยนรูปแบบของเครื่องหมายโดยใช้ `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);
    }
  };

ใช้การปรับแต่งเส้นประกอบเมื่อติดตามยานพาหนะ

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

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