이 문서에서는 지도와 컨트롤의 디자인과 분위기를 맞춤설정하는 방법을 설명합니다. 표시 영역 옵션이 있습니다 다음과 같은 방법으로 이와 같이 지시할 수 있습니다.
- 클라우드 기반 지도 스타일 지정 사용
- 자체 코드에서 직접 지도 스타일 옵션 설정
클라우드 기반 지도 스타일 지정으로 지도 스타일 지정
클라우드 기반 지도를 사용하여 지도 구성요소의 디자인 맞춤설정 제공합니다. Google Cloud 콘솔에서 원하는 지도 스타일을 만들고 수정할 수 있습니다. 할 수 있습니다. 자세한 내용은 클라우드 기반 지도 스타일 지정
그리고
ConsumerMapView
드림
및
ConsumerMapFragment
클래스는 클라우드 기반 지도 스타일 지정을 지원합니다.
클라우드 기반 지도 스타일 지정을 사용하려면 선택한 지도가
렌더기는 LATEST
입니다. 다음 섹션에서는
프로젝트를 사용하여 클라우드 기반 지도 스타일 지정
ConsumerMapView
ConsumerMapView
에서 클라우드 기반 지도 스타일 지정을 사용하려면
GoogleMapOptions
의 mapId
필드로 대체되고 GoogleMapOptions
를
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
예
자바
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
다음 두 가지 방법으로 클라우드 기반 지도 스타일 지정을 사용할 수 있습니다. ConsumerMapFragments에 사용될 수 있습니다.
- 정적으로 XML을 사용합니다.
newInstance
를 사용하여 동적으로
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
(으)로 아래 예를 참고하세요.
자바
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로 지도 스타일을 적용하는 방법을 보여줍니다.
자바스크립트
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
드림
참조하세요.
자바스크립트
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" }
]
}
]
}
});
지도에 정보 표시
다음을 사용하여 차량 또는 위치 마커에 대한 추가 정보 표시
InfoWindow
자세한 내용은 InfoWindow
를 참고하세요.
다음 예는 InfoWindow
를 만들어 연결하는 방법을 보여줍니다.
을 차량 마커에 추가합니다.
자바스크립트
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
자동 맞추기 사용 중지
지도가 표시 영역을 차량에 자동으로 맞추지 않도록 할 수 있습니다. 예측 경로 데이터를 얻는 데 도움이 됩니다. 다음 예를 참고하세요. 여정 공유를 구성할 때 자동 적합을 사용 중지하는 방법을 보여줍니다. 지도뷰입니다.
자바스크립트
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,
...
});