지도 스타일 지정

이 문서에서는 지도와 컨트롤의 디자인과 분위기를 맞춤설정하는 방법을 설명합니다. 표시 영역 옵션이 있습니다 다음과 같은 방법으로 이와 같이 지시할 수 있습니다.

• 클라우드 기반 지도 스타일 지정 사용
• 자체 코드에서 직접 지도 스타일 옵션 설정

클라우드 기반 지도 스타일 지정으로 지도 스타일 지정

클라우드 기반 지도를 사용하여 지도 구성요소의 디자인 맞춤설정 제공합니다. 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);
    }
  }
}

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;
  }
}

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.
});

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" }
        ]
      }
    ]
  }
});

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정류장 이내에 있는 경우. 작업이 종료되면 공개 상태가 종료됩니다. 나타냅니다.

이 표에는 각 작업 유형의 기본 공개 상태가 표시됩니다. 다음과 같은 작업을 할 수 있습니다. 모든 태스크에 대한 가시성을 맞춤설정할 수 있습니다. 태스크에 대한 자세한 내용 예약된 작업 가이드의 작업 유형을 참고하세요.

열려 있는 차량 작업의 공개 상태 맞춤설정

TaskTrackingInfo 인터페이스는 다양한 작업 데이터 요소를 제공합니다. 표시할 수 있습니다.

작업당 공개 상태 옵션

다음을 설정하여 작업별로 공개 상태 구성을 맞춤설정할 수 있습니다. 다음 내에서 작업을 만들거나 업데이트할 때 TaskTrackingViewConfig 사용할 수 있습니다 다음 공개 상태 옵션을 사용하여 기준을 만들 수 있습니다. 작업 요소의 공개 상태를 결정합니다.

예를 들어 맞춤설정이 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
    },
  }

자동 맞추기 사용 중지

지도가 표시 영역을 차량에 자동으로 맞추지 않도록 할 수 있습니다. 예상 경로를 따라 적절하게 조정하는 것입니다. 다음 예를 참고하세요. 여정 공유를 구성할 때 자동 적합을 사용 중지하는 방법을 보여줍니다. 지도뷰입니다.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

다음 단계

• 마커 맞춤설정
• 다중선 맞춤설정