ConsumerMapStyle
クラスには、動的なカスタマイズが可能なセッター メソッドとゲッター メソッドがあります。
をご覧ください。このクラスは、
ConsumerController.getConsumerMapStyle()
メソッドを呼び出します。
UI のカスタマイズはデバイスの回転後も維持され、
ConsumerController
接続解除されます。
カスタムのマーカー
マーカーのタイプとそのプロパティを設定する方法は、ConsumerMapStyle.setMarkerStyleOptions()
です。カスタム
マーカーのオプションは、Consumer SDK が提供するデフォルト値をオーバーライドします。
デフォルト値に戻すには、null を使用して setMarkerStyleOptions()
を呼び出します。
MarkerOptions
パラメータを指定します。アクティブな MarkerOptions
を取得する
getMarkerStyleOptions()
。
マーカーの種類
以下のマーカーをカスタマイズできます。
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
ルートのモニタリング中は TRIP_PICKUP_POINT
と TRIP_DROPOFF_POINT
が表示されます。
ルートの監視中は TRIP_VEHICLE
が表示されます。マーカーのアイコンが変わらない
ルートの実際の車両タイプに応じて決定します。Consumer SDK の更新
ルートのモニタリング中の TRIP_VEHICLE
アイコンの回転を
実際の車両がルートを走る際の挙動を示すものです。
マーカーのオプション
各マーカーで使用できるカスタマイズ可能なプロパティは、
Google マップが提供する宿泊施設
MarkerOptions
。
MarkerOptions
はそのコンストラクタを使用して構築され、カスタマイズされたプロパティは「Setter」を使用して指定されます。スタイル メソッド。
プロパティごとにデフォルト値が用意されているため、指定する必要があるのはカスタム値のみです。
マーカーを無効にするには、visible
を false
に設定します。
独自の UI 要素を使用できるように、十分なデータを用意する必要があります。
例
Java
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setMarkerStyleOptions(
MarkerType.TRIP_VEHICLE,
new MarkerOptions()
.visible(false));
});
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);
Kotlin
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
})
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)
カスタム ポリライン
ポリラインのカスタマイズは、ConsumerMapStyle.setPolylineStyleOptions
メソッドを使用して設定します。カスタム ポリライン オプションの設定
Consumer SDK によって提供されるデフォルト値をオーバーライドします。デフォルト値
setPolylineStyleOptions
を呼び出して復元できます
PolylineOptions
パラメータには null を指定します。有効な
PolylineOptions
は、次のコマンドを使用して取得できます。
getPolylineStyleOptions
メソッドを使用します。
ポリラインの種類
カスタマイズできるポリライン タイプは、以下のとおりです。
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
と REMAINING_ROUTE
はルートの監視中に表示されます。
車両のルートを表す
ポリラインのプロパティ
各ポリラインで使用可能なカスタマイズ可能なプロパティは、Google マップ PolylineOptions
で提供されています。
PolylineOptions
はそのコンストラクタを使用して構築され、カスタマイズされたプロパティは「Setter」を使用して指定されます。スタイル メソッド。デフォルト値
がプロパティごとに用意されているため、指定する必要があるのはカスタム値だけです。
ポリラインをオフにするには、visible
を false
に設定します。
例
Java
// Initializing polyline style options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.visible(false));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().visible(false)
)
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
アクティブなルートと残りのルート
[移動状況] と [注文状況] を有効にすると、アプリで アクティブおよび残りの車両を示すポリラインを使用したユーザー エクスペリエンス あります
アクティブなルートとは、車両が現在通過している道のりです ユーザーのアクティブなルートの次のウェイポイントに 移動することもできます残りのルートは アクティブなルートを通過する経路。アクティブルートが 最後のルートのウェイポイントである場合、残りのルートは存在しません。
アクティブなポリラインと残りのポリラインをカスタマイズしたり、表示を制御したりできます 自動的に最適化されます。デフォルトでは、アクティブなルートが表示され、残りのルートは は表示されません。
例
Java
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.color(Color.BLUE));
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
new PolylineOptions()
.color(Color.BLACK)
.width(5)
.visible(true));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
{
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().color(Color.BLUE)
)
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
PolylineOptions().color(Color.BLACK).width(5).visible(true)
)
}
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)
交通量に応じたポリライン
ポリラインの交通状況レイヤは、デフォルトで無効になっています。有効にすると 標準外の交通量を表し、経路ポリラインの上に描画される z-index PolylineOptions.getZIndex() と交通状況に応じてオフセットを追加します。
交通状況は 4 種類の速度。 速度のタイプごとに色をカスタマイズできます。
「交通状況に応じたポリライン」を有効にするには、TrafficStyle
オブジェクトを作成する必要があります。このオブジェクトは、setPolylineTrafficStyle()
を呼び出して ConsumerMapStyle
に渡されます。
例
Java
// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build();
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);
Kotlin
// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build()
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)
カメラのズームを調整してジャーニーにピントを合わせる
デフォルトの現在地ボタン は、デバイスの位置にカメラの中心を合わせます。もし アクティブなルートと注文の進行状況のセッションでは、 デバイスの位置情報ではなくジャーニーに焦点を合わせることができます。
Consumer SDK for Android の組み込みソリューション: AutoCamera
デバイスの位置情報ではなくカスタマージャーニーに集中できるよう、 では、デフォルトで有効になっている AutoCamera 機能を利用できます。カメラがズームする [移動中] と [注文の進行状況] のルートと、次のルートのウェイポイントがフォーカスされます。
カメラの動作をカスタマイズする
カメラの動作をより細かく制御する必要がある場合は、
ConsumerController.setAutoCameraEnabled()
を使用した AutoCamera。
ConsumerController.getCameraUpdate()
は、その時点での推奨されるカメラ境界を返します。Google Chat では
次に、この CameraUpdate
を引数として
GoogleMap.moveCamera()
または GoogleMap.animateCamera()
。
Cloud ベースのマップのスタイル設定
また、
ConsumerMapView
および
ConsumerMapFragment
Cloud ベースのマップのスタイル設定をサポートしています。
Cloud ベースのマップのスタイル設定を使用するには、選択したマップが
レンダラが LATEST
である。次の例は、BigQuery の
Cloud ベースのマップのスタイル設定をプロジェクトに追加できます。
ConsumerMapView
ConsumerMapView
で Cloud ベースのマップのスタイル設定を使用するには、
GoogleMapOptions
に mapId
フィールドを指定し、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
Cloud ベースのマップのスタイル設定を使う方法は 2 つあります。 ConsumerMapFragments:
- XML を使用して静的に。
newInstance
を使用して動的に。
XML を使用して静的に使用する
Cloud ベースのマップのスタイル設定を
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
を指定して Cloud ベースのマップのスタイル設定を使用するには、
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
}
}