Tạo kiểu cho bản đồ

Chọn nền tảng: Android iOS JavaScript

Hướng dẫn này mô tả những cách bạn có thể tuỳ chỉnh bản đồ xuất hiện trong ứng dụng Android khi bạn đi theo một chuyến đi. Bạn có thể tuỳ chỉnh giao diện của bản đồ theo các cách sau:

Tạo kiểu cho bản đồ bằng tính năng định kiểu bản đồ dựa trên đám mây

Tuỳ chỉnh giao diện của thành phần bản đồ bằng cách sử dụng tính năng định kiểu bản đồ dựa trên đám mây. Bạn có thể tạo và chỉnh sửa kiểu bản đồ trên Google Cloud Console cho bất kỳ ứng dụng nào sử dụng Google Maps mà không cần thay đổi mã. Để biết thêm thông tin, hãy chọn nền tảng của bạn tại phần Định kiểu bản đồ dựa trên đám mây.

Cả lớp ConsumerMapViewConsumerMapFragment đều hỗ trợ định kiểu bản đồ dựa trên đám mây. Để sử dụng tính năng định kiểu bản đồ dựa trên đám mây, hãy đảm bảo rằng trình kết xuất bản đồ đã chọn là LATEST. Các phần sau đây cho thấy ví dụ về cách sử dụng tính năng tạo kiểu cho bản đồ dựa trên đám mây với dự án của bạn.

ConsumerMapView

Để sử dụng tính năng tạo kiểu bản đồ dựa trên đám mây trong ConsumerMapView, hãy đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) hoặc getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Ví dụ:

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

Có 2 cách để sử dụng tính năng định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:

  • Tĩnh với XML.
  • Động với newInstance.

Tĩnh với XML

Để sử dụng tính năng tạo kiểu bản đồ dựa trên đám mây bằng XML trong ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId bằng mapId đã chỉ định. Hãy xem ví dụ sau:

<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"/>

Động với newInstance

Để sử dụng tính năng định kiểu bản đồ dựa trên đám mây bằng newInstance trong ConsumerMapFragment, hãy đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến newInstance. Hãy xem ví dụ sau:

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

Điều chỉnh mức thu phóng của camera để tập trung vào một chuyến đi

Trong phiên chia sẻ chuyến đi đang diễn ra, bạn có thể xử lý chế độ thu phóng và lấy nét camera theo một trong hai cách:

  • AutoCamera: Nếu muốn sử dụng AutoCamera, bạn không cần làm gì cả. Camera sẽ theo dõi chuyến đi. Để biết thông tin chi tiết, hãy xem AutoCamera.

  • Tuỳ chỉnh hành vi của camera: Để tuỳ chỉnh hành vi của camera, bạn phải tắt AutoCamera rồi thực hiện các chế độ tuỳ chỉnh. Để biết thông tin chi tiết, hãy xem phần Tuỳ chỉnh hành vi của camera.

AutoCamera căn giữa camera

Consumer SDK cung cấp một tính năng AutoCamera được bật theo mặc định trên nút Vị trí của tôi tích hợp sẵn cho Maps SDK. Camera sẽ thu phóng để tập trung vào tuyến đường và điểm tham chiếu tiếp theo của chuyến đi.

Nếu bạn muốn sử dụng AutoCamera, hãy nhớ bật tính năng này. Để biết thêm thông tin, hãy xem isAutoCameraEnabled.

`AutoCamera`

Để biết thông tin chi tiết về nút Vị trí của tôi, hãy xem phần Nút Vị trí của tôi trong tài liệu về Maps JavaScript API.

Tuỳ chỉnh hành vi của camera

Để kiểm soát hành vi của camera tốt hơn, hãy làm theo các bước sau để tắt AutoCamera và tuỳ chỉnh hành vi của camera theo cách thủ công.

  1. Tắt AutoCamera bằng cách sử dụng ConsumerController.setAutoCameraEnabled().

  2. Lấy ranh giới camera được đề xuất bằng cách sử dụng ConsumerController.getCameraUpdate().

  3. Cung cấp CameraUpdate làm đối số cho một trong các hàm Android sau:

Bước tiếp theo

Theo dõi chuyến đi trên Android