จัดรูปแบบแผนที่

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

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

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

หากต้องการใช้รูปแบบแผนที่กับแผนที่การแชร์การเดินทางของผู้บริโภคใน JavaScript ให้ระบุ mapId และ mapOptions อื่นๆ เมื่อสร้าง JourneySharingMapView

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

JavaScript

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

TypeScript

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

จัดรูปแบบแผนที่ในโค้ดของคุณเองโดยตรง

นอกจากนี้ คุณยังปรับแต่งรูปแบบแผนที่ได้โดยการตั้งค่าตัวเลือกแผนที่เมื่อสร้าง JourneySharingMapView ตัวอย่างต่อไปนี้แสดงวิธีจัดรูปแบบแผนที่โดยใช้ ตัวเลือกแผนที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกแผนที่ที่ตั้งค่าได้ที่ mapOptions ในข้อมูลอ้างอิงของ Google Maps JavaScript API

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

ควบคุมระดับการเข้าถึงข้อมูลงานใน SDK

คุณควบคุมระดับการมองเห็นของออบเจ็กต์งานบางอย่างบนแผนที่ได้โดยใช้ กฎการมองเห็น

ระดับการเข้าถึงเริ่มต้นของข้อมูลงาน

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

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

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

ปรับแต่งระดับการมองเห็นของงานยานพาหนะที่เปิดอยู่

อินเทอร์เฟซ TaskTrackingInfo มีองค์ประกอบข้อมูลงานหลายอย่าง ที่สามารถแสดงได้ด้วย Consumer SDK

องค์ประกอบข้อมูลงานที่ปรับแต่งได้

โพลีไลน์ของเส้นทาง

เวลาถึงโดยประมาณ

เวลาโดยประมาณที่ใช้ในการทำงานให้เสร็จ

ระยะทางขับรถที่เหลือไปยังงาน

จำนวนป้ายรถเมล์ที่เหลือ

ตำแหน่งของยานพาหนะ

ตัวเลือกระดับการเข้าถึงต่องาน

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

ตัวเลือกระดับการเข้าถึง

จำนวนป้ายรถเมล์ที่เหลือ

ระยะเวลาจนถึงเวลาถึงโดยประมาณ

ระยะทางที่เหลือ

แสดงเสมอ

ไม่แสดง

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

องค์ประกอบข้อมูลที่จะปรับ ระดับการแชร์ เกณฑ์
โพลีไลน์ของเส้นทาง แสดง ยานพาหนะอยู่ภายใน 3 ป้าย
ETA แสดง ระยะทางขับรถที่เหลือสั้นกว่า 5,000 เมตร
จำนวนป้ายรถเมล์ที่เหลือ ไม่แสดง ยานพาหนะอยู่ภายใน 3 ป้าย

ตัวอย่างต่อไปนี้แสดงการกำหนดค่านี้

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

กฎการแสดงผลเส้นหลายเหลี่ยมของเส้นทางและตำแหน่งยานพาหนะ

เส้นหลายเส้นของเส้นทางจะมองไม่เห็นเว้นแต่ตำแหน่งของยานพาหนะจะมองเห็นด้วย เช่นกัน มิฉะนั้นจะอนุมานตำแหน่งของยานพาหนะได้จากจุดสิ้นสุดของ เส้นหลายเส้น

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

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

ตั้งค่าตัวเลือก Polyline ของเส้นทางให้มีค่าน้อยกว่าหรือเท่ากับค่าที่ตั้งไว้ สำหรับตำแหน่งของยานพาหนะ เช่น

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
ตัวเลือกระดับการเข้าถึงต่างๆ เกณฑ์การแสดงผล คำแนะนำ
ตำแหน่งของรถยนต์แสดงอยู่

ซึ่งจะเกิดขึ้นเมื่อเป็นไปตามทั้งตัวเลือกตำแหน่งยานพาหนะและ ตัวเลือกระดับการเข้าถึงเส้นหลายเส้น เช่น

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

ในตัวอย่างนี้ ตำแหน่งของยานพาหนะจะแสดงก็ต่อเมื่อจำนวนป้ายรถเมล์ที่เหลืออยู่มีอย่างน้อย 3 ป้ายและระยะทางขับรถที่เหลืออยู่มีอย่างน้อย 3, 000 เมตร

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

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

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

ขั้นตอนถัดไป