このドキュメントでは、地図とコントロールの外観をカスタマイズする方法について説明します。 データの公開設定とビューポートのオプションその方法は次のとおりです。
- Cloud ベースのマップのスタイル設定を使用する
- 独自のコードで地図のスタイル オプションを直接設定する
Cloud ベースのマップのスタイル設定で地図のスタイルを設定する
Cloud ベースのマップを使用して、マップ コンポーネントのデザインをカスタマイズする カスタマイズします。地図のスタイルの作成と編集は、任意の Google Cloud コンソールで Google マップを使用するアプリをすべて利用できます。コードを変更する必要はありません。 詳細については、次をご覧ください: Cloud ベースのマップのスタイル設定。
また、
ConsumerMapView
および
ConsumerMapFragment
Cloud ベースのマップのスタイル設定をサポートしています。
Cloud ベースのマップのスタイル設定を使用するには、選択したマップが
レンダラが LATEST
である。以降のセクションでは、
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
}
}
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
。次の例は、API キーを使用して地図のスタイルを設定する方法を示しています。
地図のオプションを表示します。設定できる地図オプションについて詳しくは、
mapOptions
(Google Maps JavaScript API リファレンス)をご覧ください。
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 駅以内にあることを示します。公開設定の終了は、タスクの実行後に 表示されます。
次の表に、タスクの種類ごとのデフォルトの公開設定を示します。Google Chat では 多くのタスクの表示をカスタマイズできますが、すべてではありません。タスクの詳細については、 タイプについては、スケジュールされたタスクのガイドのタスクの種類をご覧ください。
タスクの種類 | デフォルトの公開設定 | カスタマイズ可能 | 説明 |
---|---|---|---|
利用できないタスク | 非表示 | いいえ | ドライバーの休憩と給油に使用されます。配送タスクへのルートが 別の停車地が含まれていると、その停車地は表示されません タスクのみに含まれている必要があります。到着予定時刻 タスク完了までの予想時間は 引き続き表示されます できます。 |
車両タスクを開く | 表示 | ○ | タスクが完了またはキャンセルされると公開は終了します。 未完了の車両タスクの公開設定をカスタマイズできます。詳しくは、 [営業待ちリスト] の公開設定をカスタマイズする 車両タスクの機能です。 |
終了した車両タスク | 非表示 | いいえ | 終了した車両タスクの公開設定はカスタマイズできません。 |
未完了の車両タスクの公開設定をカスタマイズする
TaskTrackingInfo
インターフェースは、さまざまなタスクデータ要素を提供します。
Consumer SDK で表示できます。
カスタマイズ可能なタスクデータ要素 | |
---|---|
ポリラインをルーティングする 到着までの予想時間 タスク完了までの予想時間 |
タスクまでの残りの走行距離 残りの経由地数 車両の位置情報 |
タスクごとの公開設定オプション
次の設定により、タスクごとに公開設定をカスタマイズできます。
TaskTrackingViewConfig
(タスクを作成または更新する場合)
Fleet Engine次の公開設定オプションを使用して、
タスク要素の可視性を判断します。
公開設定オプション | ||
---|---|---|
残りの経由地数 到着予定時刻までの時間 残りの走行距離 |
常に表示 非表示 |
説明のために、カスタマイズ例で 3 つの画面を表示するよう調整するとします。 データ要素を作成します。その他 要素は、デフォルトの公開設定ルールに従います。
調整するデータ要素 | 公開設定 | Criterion |
---|---|---|
経路のポリライン | 表示 | 停車場所が 3 か所以内である。 |
ETA | 表示 | 残りの走行距離は 5,000 未満です メートルです。 |
残りの経由地数 | 表示しない | 停車場所が 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 回以上で、かつ残りの運転 距離は 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,
...
});