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 mảnh bản đồ để theo dõi chuyến đi.
  2. Thêm tính năng hỗ trợ cho lớp cơ sở và trình điều khiển khung hiển thị của bản đồ.
  3. Thêm tính năng hỗ trợ đồ 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 camera khác 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 phần Tạo kiểu cho bản đồ.

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

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

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

  • ConsumerMapView: Dùng để xác định một bản đồ có View.

Các tính năng của hai phương thức này đều giống nhau, 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 này đều được giải thích chi tiết hơn trong phần sau.

Thêm một đoạn hoặc khung hiển thị bản đồ

Để tạo bản đồ hiển thị tiến trình của chuyến đi bằng một đoạn mã hoặc khung hiển thị 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 mảnh hoặc khung hiển thị trong tệp XML bố cục ứng dụng của bạn nằm trong /res/layout. Xác định bản đồ chuyến đi dưới dạng một mảnh bằng cách sử dụng ConsumerMapFragment hoặc dưới dạng một khung hiển thị bằng cách sử dụng ConsumerMapView.

    Sau đó, mảnh hoặc khung hiển thị 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 đồ này cũng cung cấp một đối tượng 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 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 nếu cần.

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

  1. Xác định mảnh trong tệp XML bố cục ứng dụng của bạn, như minh hoạ trong ví dụ 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 khung hiển thị trong một mảnh hoặc trong một hoạt động, như được xác định trong tệp XML của bạn.

     <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 đến getConsumerGoogleMapAsync() từ onCreate(). Ngoài tham số gọi lại, hãy thêm các thông tin chi tiết sau:

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

    • 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 mảnh cũng giống như ví dụ trước cho MapView trong một hoạt động, ngoại trừ việc mảnh này mở rộng bố cục bao gồm MapView trong phương thức onCreateView() của mảnh.

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à trình xem bộ điều khiển

Để 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 không đồng bộ trong ConsumerMapReadyCallback.

    ConsumerGoogleMap là một lớp trình bao bọc cho lớp GoogleMap. Thư viện 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 đồ cơ bản của Google. Ví dụ: GoogleMap chỉ cho phép đăng ký một lệnh gọi lại, nhưng ConsumerGoogleMap hỗ trợ hai lệnh gọi lại đã đăng ký. 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 tuần 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 bằng 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 khả năng hỗ trợ đồ 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à tài nguyên có thể vẽ dạng vectơ bằng cách làm theo các bước sau:

  1. Thêm mã sau vào Hoạt động của bạn. Mã này mở rộng AppCompatActivity để sử dụng các đối tượng có thể vẽ theo vectơ trong Consumer SDK.

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 chuyến đi trên Android

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