本文档介绍了如何自定义地图和控件的外观和风格 数据可见性和视口选项。为此，您可以执行以下操作：
- 使用云端地图样式设置
- 直接在您自己的代码中设置地图样式选项
使用云端地图样式设置设置地图样式
使用云端地图自定义地图组件的外观和风格 样式。您可以在 Google Cloud 控制台上创建和修改地图样式， 而无需更改任何代码。 如需了解详情，请参阅 云端地图样式设置。
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
在 Google Maps Engine 中，您可以通过两种方式使用云端地图样式设置 ConsumerMapFragments:
- 使用 XML 进行静态。
- 与
newInstance动态关联。
使用 XML 静态设置
要将云端地图样式设置与 XML 中的
ConsumerMapFragment，请添加 map:mapId XML 属性（具有指定的
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，在 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 设为可见。
| 可自定义的任务数据元素 | |
|---|---|
|
路线多段线 预计到达时间 预计任务完成时间 |
到任务地点的剩余行驶距离 剩余经停点数 车辆位置 |
每个任务的公开范围选项
您可以通过设置
TaskTrackingViewConfig（当您在以下位置创建或更新任务时）
Fleet Engine。使用以下公开范围选项创建条件
确定任务元素的可见性：
| 公开范围选项 | ||
|---|---|---|
|
剩余经停点数 预计到达时间前的时长 剩余行驶距离 |
始终显示 一律不显示 |
|
举例说明，假设一个示例自定义调整了三个 数据元素（使用下表所示的条件）。所有其他 元素都遵循默认的可见性规则。
| 要调整的数据元素 | 公开范围 | 标准 |
|---|---|---|
| 路线多段线 | 显示 | 车辆在 3 个经停点范围内。 |
| 预计到达时间 | 显示 | 剩余行驶距离短于 5000 米。 |
| 剩余经停点数 | 永不显示 | 车辆在 3 个经停点范围内。 |
以下示例展示了此配置：
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
路线多段线和车辆位置可见性规则
除非同时显示车辆位置，否则路线多段线不会显示 visible;否则，系统将根据 多段线
<ph type="x-smartling-placeholder">这些准则可帮助您提供有效的路线组合 多段线和车辆位置可见性选项。
| 相同的公开范围选项 | 显示条件 | 指南 |
|---|---|---|
| 路线多段线选项设为始终显示。 | 将车辆的位置信息设置为始终可见。 | |
| 车辆的位置信息已设为永不显示。 | 将路线多段线设置为永不显示。 | |
公开范围选项为以下任意一项：
<ph type="x-smartling-placeholder">
|
将路线多段线选项的值设为小于或等于所设置的值 。例如：
"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,
...
});