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

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

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

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

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

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

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

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 ในเอกสารอ้างอิง Maps JavaScript API ของ Google

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

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

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

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

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

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

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

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

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

ตัวเลือกระดับการมองเห็นต่องาน

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

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

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

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

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

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

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

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

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

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

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

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

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

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

• ปรับแต่งเครื่องหมาย
• ปรับแต่งเส้นประกอบ