Tài liệu này đề cập đến cách tuỳ chỉnh giao diện của bản đồ và chức năng điều khiển các tuỳ chọn chế độ xem và chế độ hiển thị dữ liệu. Bạn có thể thực hiện việc này theo các cách sau:
- Sử dụng kiểu bản đồ dựa trên đám mây
- Đặt tùy chọn kiểu bản đồ trực tiếp trong mã của riêng bạn
Tạo kiểu cho bản đồ bằng kiểu bản đồ dựa trên đám mây
Tuỳ chỉnh giao diện của thành phần bản đồ bằng cách sử dụng bản đồ trên đám mây tạo kiểu. Bạn có thể tạo và chỉnh sửa kiểu bản đồ trên bảng điều khiển Google Cloud cho bất kỳ của ứng dụng sử dụng Google Maps mà không yêu cầu thay đổi mã. Để biết thêm thông tin, hãy xem Định kiểu bản đồ trên đám mây.
Cả hai thuộc tính
ConsumerMapView
và
ConsumerMapFragment
các lớp hỗ trợ định kiểu bản đồ trên đám mây.
Để sử dụng việc định kiểu bản đồ dựa trên đám mây, hãy đảm bảo rằng các bản đồ đã chọn
trình kết xuất là LATEST. Các phần sau đây trình bày ví dụ về cách sử dụng
định kiểu bản đồ dựa trên đám mây bằng dự án của bạn.
ConsumerMapView
Để sử dụng kiểu bản đồ dựa trên đám mây trong ConsumerMapView, hãy đặt giá trị
Trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Ví dụ:
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
Có hai cách để sử dụng định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:
- Tĩnh với XML.
- Linh hoạt nhờ
newInstance.
Tĩnh với XML
Để sử dụng định kiểu bản đồ dựa trên đám mây bằng XML trong
ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId bằng thuộc tính được chỉ định
mapId. Hãy xem ví dụ sau:
<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"/>
Linh hoạt nhờ newInstance
Để sử dụng định kiểu bản đồ dựa trên đám mây bằng newInstance trong
ConsumerMapFragment, đặt trường mapId trên GoogleMapOptions và truyền
GoogleMapOptions thành newInstance. Hãy xem ví dụ sau:
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
}
}
Để áp dụng kiểu bản đồ cho bản đồ chia sẻ hành trình của người tiêu dùng sử dụng JavaScript, hãy chỉ định một
mapId và
bất kỳ loại nào khác
mapOptions
khi bạn tạo JourneySharingMapView.
Các ví dụ sau đây minh hoạ cách áp dụng kiểu bản đồ bằng mã bản đồ.
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.
});
Tạo kiểu cho bản đồ ngay trong mã của riêng bạn
Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách đặt tuỳ chọn bản đồ khi bạn tạo
JourneySharingMapView. Các ví dụ sau đây minh hoạ cách tạo kiểu cho bản đồ bằng cách sử dụng
tuỳ chọn bản đồ. Để biết thêm thông tin về những tùy chọn bản đồ mà bạn có thể đặt, hãy xem
mapOptions
trong tài liệu tham khảo API JavaScript của 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" }
]
}
]
}
});
Kiểm soát chế độ hiển thị dữ liệu công việc với SDK
Bạn có thể kiểm soát chế độ hiển thị của một số đối tượng nhiệm vụ nhất định trên bản đồ bằng cách sử dụng các quy tắc hiển thị.
Chế độ hiển thị mặc định của dữ liệu công việc
Theo mặc định, dữ liệu của các nhiệm vụ được giao cho xe sẽ hiển thị khi xe cách nhiệm vụ 5 điểm dừng. Chế độ hiển thị kết thúc khi việc cần làm đã hoàn tất hoặc bị huỷ.
Bảng này hiển thị chế độ hiển thị mặc định cho từng loại việc cần làm. Bạn có thể tuỳ chỉnh chế độ hiển thị cho nhiều tác vụ, nhưng không phải tất cả. Để biết thêm thông tin về nhiệm vụ loại việc cần làm, hãy xem mục Loại việc cần làm trong hướng dẫn về Việc cần làm đã lên lịch.
| Loại việc cần làm | Chế độ hiển thị mặc định | Có thể tuỳ chỉnh? | Mô tả |
|---|---|---|---|
| Tác vụ về tình trạng không có sẵn | Không hiển thị | Không | Dùng khi lái xe nghỉ giải lao và tiếp nhiên liệu. Nếu một tuyến đường đến nhiệm vụ phân phối cũng chứa một trạm dừng xe khác, điểm dừng đó không được hiển thị nếu tệp đó chỉ chứa tác vụ không có sẵn. Thời gian đến dự kiến và thời gian hoàn thành công việc ước tính vẫn được hiển thị cho việc phân phối công việc. |
| Mở nhiệm vụ trên xe | Hiển thị | Có | Chế độ hiển thị sẽ kết thúc khi việc cần làm hoàn thành hoặc bị huỷ. Bạn có thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe đang mở. Xem Tuỳ chỉnh chế độ hiển thị của quảng cáo đang mở nhiệm vụ trên xe. |
| Nhiệm vụ về xe đã đóng | Không hiển thị | Không | Bạn không thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe đã đóng. |
Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe mở
Giao diện TaskTrackingInfo cung cấp một số phần tử dữ liệu công việc
có thể hiển thị với SDK người tiêu dùng.
| Phần tử dữ liệu công việc có thể tuỳ chỉnh | |
|---|---|
|
Hình nhiều đường Thời gian đến dự kiến Thời gian hoàn thành việc cần làm ước tính |
Quãng đường lái xe còn lại đến nhiệm vụ Số điểm dừng còn lại Vị trí xe |
Số chế độ hiển thị cho mỗi nhiệm vụ
Bạn có thể tuỳ chỉnh cấu hình chế độ hiển thị theo từng tác vụ bằng cách cài đặt
TaskTrackingViewConfig khi tạo hoặc cập nhật một công việc trong
Fleet Engine. Sử dụng các tùy chọn chế độ hiển thị sau đây để tạo tiêu chí cho
xác định chế độ hiển thị của một phần tử tác vụ:
| Các chế độ hiển thị | ||
|---|---|---|
|
Số điểm dừng còn lại Thời gian cho đến thời gian đến ước tính Quãng đường lái xe còn lại |
Luôn hiển thị Không bao giờ hiển thị |
|
Để minh hoạ, giả sử một tuỳ chỉnh mẫu điều chỉnh chế độ hiển thị cho phần tử dữ liệu bằng cách sử dụng các tiêu chí được hiển thị trong bảng sau. Tất cả giá trị khác tuân theo các quy tắc hiển thị mặc định.
| Phần tử dữ liệu cần điều chỉnh | Chế độ hiển thị | Tiêu chí |
|---|---|---|
| Tuyến đường hình nhiều đường | Hiện | Xe cách 3 trạm dừng. |
| ETA | Hiện | Quãng đường lái xe còn lại ngắn hơn 5.000 mét. |
| Số điểm dừng còn lại | Không bao giờ hiển thị | Xe cách 3 trạm dừng. |
Ví dụ sau đây minh hoạ cấu hình này:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Quy tắc về chế độ hiển thị hình nhiều đường và vị trí của xe
Bạn không thể nhìn thấy hình nhiều đường của tuyến đường trừ phi bạn cũng chọn vị trí của xe visible; nếu không, bạn có thể suy ra vị trí xe bằng cách kết thúc hình nhiều đường.
Những nguyên tắc này giúp bạn cung cấp một tổ hợp hợp lệ cho tuyến đường các tuỳ chọn chế độ hiển thị vị trí của xe và hình nhiều đường.
| Các chế độ hiển thị giống nhau | Tiêu chí mức độ hiển thị | Hướng dẫn |
|---|---|---|
| Các tuỳ chọn hình nhiều đường tuyến đường được đặt thành luôn hiển thị. | Đặt vị trí của xe ở chế độ luôn hiển thị. | |
| Đã đặt vị trí của xe thành không bao giờ hiển thị. | Đặt hình nhiều đường của tuyến đường thành không bao giờ hiển thị. | |
Chế độ hiển thị là bất kỳ lựa chọn nào sau đây:
|
Đặt các lựa chọn hình nhiều đường thành một giá trị nhỏ hơn hoặc bằng giá trị đã đặt cho vị trí của xe. Ví dụ:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingStopCountThreshold": 5
},
}
|
|
| Các chế độ hiển thị khác nhau | Tiêu chí về khả năng hiển thị | Hướng dẫn |
| Người xem có thể nhìn thấy vị trí của xe | Điều này chỉ xảy ra khi cả vị trí của xe và đã đáp ứng các tuỳ chọn hiển thị hình nhiều đường. Ví dụ:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}
Trong ví dụ này, vị trí của xe chỉ hiển thị nếu phần còn lại số điểm dừng tối thiểu là 3 VÀ số lần lái xe còn lại khoảng cách tối thiểu là 3000 mét. |
Tắt tính năng điều chỉnh tự động
Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn vừa với xe và tuyến đường dự kiến bằng cách tắt tính năng điều chỉnh tự động. Ví dụ sau đây cho biết cách tắt tính năng tự động điều chỉnh khi bạn thiết lập chế độ chia sẻ hành trình chế độ xem bản đồ.
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,
...
});