เอกสารนี้ครอบคลุมถึงวิธีปรับแต่งรูปลักษณ์ของแผนที่และการควบคุม ระดับการเข้าถึงข้อมูลและวิวพอร์ต ซึ่งทำได้หลายวิธี ดังนี้
- ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
- ตั้งค่าตัวเลือกรูปแบบแผนที่ในโค้ดของคุณเองโดยตรง
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้แผนที่ในระบบคลาวด์ การจัดรูปแบบ คุณสามารถสร้างและแก้ไขรูปแบบแผนที่ในคอนโซล Google Cloud สำหรับ ของแอปที่ใช้ Google Maps โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย สำหรับข้อมูลเพิ่มเติม โปรดดู การจัดรูปแบบแผนที่ในระบบคลาวด์
ทั้ง
ConsumerMapView
และ
ConsumerMapFragment
ชั้นเรียนจะรองรับการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ โปรดตรวจสอบว่าแผนที่ที่เลือก
โหมดแสดงภาพคือ LATEST
ส่วนต่อไปนี้จะแสดงตัวอย่างวิธีใช้
การจัดรูปแบบแผนที่ในระบบคลาวด์พร้อมกับโปรเจ็กต์ของคุณ
ConsumerMapView
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ใน ConsumerMapView
ให้ตั้งค่า
ฟิลด์ mapId
บน GoogleMapOptions
และส่งต่อ GoogleMapOptions
ไปยัง
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
ตัวอย่าง
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
สามารถใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ได้ 2 วิธีใน ConsumerMapFragments:
- แบบคงที่โดยใช้ XML
- แบบไดนามิกด้วย
newInstance
แบบคงที่ที่มี XML
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ XML ในองค์ประกอบ
ConsumerMapFragment
ให้เพิ่มแอตทริบิวต์ XML map:mapId
พร้อมข้อมูลที่ระบุ
mapId
โปรดดูตัวอย่างต่อไปนี้
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
แบบไดนามิกกับ newInstance
วิธีใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ newInstance
ใน
ConsumerMapFragment
ตั้งค่าช่อง mapId
ใน GoogleMapOptions
และส่ง
GoogleMapOptions
ถึง newInstance
โปรดดูตัวอย่างต่อไปนี้
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
หากต้องการใช้รูปแบบแผนที่กับแผนที่การแชร์เส้นทางของผู้บริโภค 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
ในการอ้างอิง JavaScript API ของ Google Maps
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 ป้าย |
ETA | แสดง | ระยะทางขับรถที่เหลือน้อยกว่า 5,000 เมตร |
จำนวนป้ายที่เหลือ | ไม่แสดง | รถอยู่ในช่วง 3 ป้าย |
ตัวอย่างต่อไปนี้แสดงการกำหนดค่านี้
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
กฎการระบุเส้นทางและตำแหน่งของยานพาหนะ
ไม่สามารถมองเห็นเส้นโครงของเส้นทางได้ เว้นแต่จะระบุตำแหน่งของรถด้วย visible; ไม่เช่นนั้น ตำแหน่งของรถอาจอนุมานได้โดยสิ้นสุด เส้นประกอบ
หลักเกณฑ์เหล่านี้ช่วยให้คุณระบุชุดค่าผสมที่ถูกต้องสำหรับเส้นทางได้ ตัวเลือกการแสดงเส้นประกอบและตำแหน่งพาหนะ
ตัวเลือกระดับการเข้าถึงเดียวกัน | เกณฑ์การแสดงผล | คำแนะนำ |
---|---|---|
ตั้งค่าตัวเลือกเส้นประกอบเส้นทางให้แสดงตลอดเวลา | ตั้งค่าตำแหน่งของรถให้แสดงอยู่เสมอ | |
ตั้งค่าตำแหน่งของรถยนต์เป็นไม่แสดง | ตั้งค่าเส้นประกอบของเส้นทางเป็นไม่แสดง | |
ตัวเลือกระดับการเข้าถึงเป็นอะไรก็ได้ใน
|
ตั้งค่าตัวเลือกเส้นประกอบเส้นทางเป็นค่าที่น้อยกว่าหรือเท่ากับค่าที่ตั้งไว้ เพื่อดูตำแหน่งของรถ เช่น "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,
...
});