本文档介绍了如何自定义地图的外观和风格，以及如何控制数据可见性和视口选项。为此，您可以执行以下操作：
- 使用云端地图样式设置
- 直接在您自己的代码中设置地图样式选项
使用云端地图样式设置设置地图样式
使用云端地图样式设置自定义地图组件的外观和风格。您可以在 Google Cloud 控制台中为使用 Google 地图的所有应用创建和修改地图样式，而无需更改任何代码。如需了解详情，请参阅云端地图样式设置。
ConsumerMapView
和
ConsumerMapFragment
类支持云端地图样式设置。
如需使用云端地图样式设置，请确保所选的地图渲染程序为 LATEST。以下部分展示了如何在项目中使用基于云的 Google 地图样式的示例。
ConsumerMapView
如需在 ConsumerMapView 中使用云端地图样式设置，请将
mapId 字段，并将 GoogleMapOptions 传递给GoogleMapOptions
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
或 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
在 ConsumerMapFragment 中使用云端地图样式设置的方法有两种：
- 使用 XML 进行静态。
- 与
newInstance动态关联。
使用 XML 进行静态设置
如需在 ConsumerMapFragment 中使用 XML 与云端地图样式搭配使用，请添加包含指定 mapId 的 map:mapId XML 属性。请参阅以下示例：
<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，在 GoogleMapOptions 上设置 mapId 字段，并传递
从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.
以下示例展示了如何使用地图 ID 应用地图样式。
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
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 个经停点范围内。当任务被执行时 已完成或取消。
下表显示了每种类型任务的默认公开范围。您可以 自定义很多任务（但并非所有任务）的可见性。如需详细了解任务类型，请参阅安排的任务指南中的任务类型。
| 任务类型 | 默认的公开范围 | 是否可自定义？ | 说明 |
|---|---|---|---|
| 不可用性任务 | 不显示 | 否 | 用于驾驶员休息和加油。如果路由指向某个传送任务 还包含另一个车辆经停点，该经停点未显示 。预计到达时间 对于提交内容，系统仍会显示预计完成时间 任务本身。 |
| 打开车辆任务 | Visible | 是 | 当任务完成或取消时，公开范围即告结束。 您可以自定义处于打开状态的车辆任务的可见性。请参阅自定义打开的车辆任务的公开范围。 |
| 已关闭的车辆任务 | 不显示 | 否 | 您无法自定义已关闭车辆任务的公开范围。 |
自定义处于打开状态的车辆任务的显示设置
TaskTrackingInfo 接口提供了许多任务数据元素
可通过使用方 SDK 设为可见。
| 可自定义的任务数据元素 | |
|---|---|
|
路线多段线 预计到达时间 预计任务完成时间 |
到任务地点的剩余行驶距离 剩余经停点数 车辆位置 |
每个任务的公开范围选项
您可以在 Fleet Engine 中创建或更新任务时设置 TaskTrackingViewConfig，以按任务自定义公开范围配置。使用以下公开范围选项创建条件
确定任务元素的可见性：
| 公开范围选项 | ||
|---|---|---|
|
剩余经停点数 预计到达时间前的时长 剩余行驶距离 |
始终显示 永不显示 |
|
举例说明，假设一个示例自定义调整了三个 数据元素（使用下表所示的条件）。所有其他 元素都遵循默认的可见性规则。
| 要调整的数据元素 | 公开范围 | 标准 |
|---|---|---|
| 路线多段线 | 显示 | 车辆距离 3 个经停点以内。 |
| 预计到达时间 | 显示 | 剩余的驾车距离短于 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 次，且剩余行驶时间 距离至少为 3000 米 |
停用自动调整
您可以阻止地图自动根据车辆调整视口 和预期路线。以下示例展示了如何在配置行程分享地图视图时停用自动调整大小。
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,
...
});