Thiết lập bản đồ

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

Để theo dõi một chuyến đi trong ứng dụng dành cho người tiêu dùng, trước tiên, bạn cần xác định một bản đồ và thêm tính năng hỗ trợ cho bản đồ vectơ (nếu cần).

Để thiết lập bản đồ trong ứng dụng, hãy làm theo các bước sau:

  1. Xác định một fragment bản đồ để theo dõi một chuyến đi.
  2. Thêm tính năng hỗ trợ cho lớp cơ sở bản đồ và bộ điều khiển chế độ xem.
  3. Thêm tính năng hỗ trợ cho đồ hoạ vectơ Android để hiển thị bản đồ vectơ (nếu cần).

Sau khi xác định một bản đồ, bạn có thể thêm các chế độ xem và chế độ điều khiển máy ảnh bổ sung mà bạn muốn tuỳ chỉnh trải nghiệm hình ảnh. Để biết thêm thông tin chi tiết, hãy xem Tạo kiểu cho bản đồ.

Bước 1: Xác định một fragment bản đồ để theo dõi một chuyến đi

Bạn xác định một bản đồ bằng cách thêm một fragment hoặc chế độ xem bản đồ để tạo bản đồ nơi bạn chia sẻ một chuyến đi theo yêu cầu trong ứng dụng dành cho người tiêu dùng. Để xác định bản đồ, hãy làm theo một trong các phương thức sau:

  • ConsumerMapFragment: Dùng để xác định bản đồ bằng Fragment.

  • ConsumerMapView: Dùng để xác định bản đồ bằng View.

Các tính năng giống nhau đối với cả hai phương thức, vì vậy, hãy chọn phương thức phù hợp hơn cho ứng dụng của bạn.

Cả hai phương thức đều được giải thích chi tiết hơn trong phần sau.

Thêm một mảnh hoặc chế độ xem bản đồ

Để tạo bản đồ hiển thị tiến trình chuyến đi bằng một fragment hoặc chế độ xem Android, hãy làm theo các bước sau và tham khảo các ví dụ về mã.

  1. Xác định một fragment hoặc chế độ xem trong tệp XML bố cục ứng dụng nằm trong /res/layout. Xác định bản đồ chuyến đi là một fragment bằng ConsumerMapFragment hoặc là một chế độ xem bằng ConsumerMapView.

    Sau đó, fragment hoặc chế độ xem sẽ cung cấp quyền truy cập vào bản đồ chuyến đi mà ứng dụng của bạn có thể truy cập và sửa đổi. Bản đồ cũng cung cấp một trình xử lý cho ConsumerController, cho phép ứng dụng của bạn kiểm soát và tuỳ chỉnh trải nghiệm của người tiêu dùng.

  2. Từ phương thức onCreate(), hãy gọi getConsumerGoogleMapAsync(callback), phương thức này sẽ trả về ConsumerGoogleMap một cách không đồng bộ trong lệnh gọi lại.

  3. Sử dụng ConsumerGoogleMap để hiển thị tiến trình chuyến đi và cập nhật khi cần.

Ví dụ về cách thêm ConsumerMapFragment

  1. Xác định fragment trong tệp XML bố cục ứng dụng, như minh hoạ trong ví dụ về mã sau.

    <fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  2. Gọi getConsumerGoogleMapAsync() từ phương thức onCreate().

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Ví dụ về cách thêm ConsumerMapView

  1. Sử dụng chế độ xem trong một fragment hoặc trong một hoạt động, như được xác định trong tệp XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. Gọi getConsumerGoogleMapAsync() từ onCreate(). Ngoài tham số lệnh gọi lại, hãy thêm các thông tin chi tiết sau:

    • Hoạt động hoặc fragment chứa. Lớp cơ sở hoạt động hoặc fragment phải là FragmentActivity hoặc một hỗ trợ Fragment (tương ứng), vì chúng cung cấp quyền truy cập vào vòng đời của lớp.

    • GoogleMapOptions (có thể là giá trị rỗng), chứa các thuộc tính cấu hình cho MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

MapView trong một fragment giống như ví dụ trước cho MapView trong một activity, ngoại trừ việc fragment này tăng cường bố cục bao gồm MapView trong phương thức onCreateView() của fragment.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Bước 2: Thêm tính năng hỗ trợ cho lớp cơ sở bản đồ và bộ điều khiển chế độ xem

Để chia sẻ tiến trình chuyến đi trong ứng dụng, hãy thêm các lớp sau vào ứng dụng: ConsumerGoogleMap và ConsumerController.

  • Nhận ConsumerGoogleMap từ ConsumerMapFragment hoặc ConsumerMapView, cả hai đều trả về ConsumerGoogleMap một cách không đồng bộ trong ConsumerMapReadyCallback.

    ConsumerGoogleMap là một lớp trình bao bọc cho lớp GoogleMap. Lớp này sử dụng một API tương đương với GoogleMap để ứng dụng của bạn có thể tương tác với bản đồ. Bằng cách này, ứng dụng của bạn có thể tương tác liền mạch với cùng một bản đồ Google cơ bản. Ví dụ: GoogleMap chỉ cho phép đăng ký một lệnh gọi lại, nhưng ConsumerGoogleMap hỗ trợ các lệnh gọi lại đã đăng ký kép. Các lệnh gọi lại này cho phép ứng dụng của bạn đăng ký các lệnh gọi lại được gọi theo trình tự.

  • Nhận ConsumerController từ ConsumerGoogleMap trong getConsumerController().

    ConsumerController cung cấp quyền truy cập vào các tính năng chia sẻ chuyến đi, chẳng hạn như theo dõi chuyến đi, kiểm soát trạng thái chuyến đi và đặt vị trí.

Để biết cách thêm ConsumerGoogleMap và ConsumerController vào ứng dụng của bạn trong Java và Kotlin, hãy xem các ví dụ sau.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Bước 3: Thêm tính năng hỗ trợ cho đồ hoạ vectơ Android

Nếu thiết kế ứng dụng của bạn yêu cầu hỗ trợ đồ hoạ vectơ, hãy thêm tính năng hỗ trợ cho các thiết bị Android và hình vẽ vectơ bằng các bước sau:

  1. Thêm mã sau vào Hoạt động. Mã này mở rộng AppCompatActivity để sử dụng hình vẽ vectơ trong SDK dành cho người tiêu dùng.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

Tiếp theo là gì?

Theo dõi một chuyến đi trong Android

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