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 bản đồ và thêm hỗ trợ cho bản đồ vectơ, nếu cần.

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

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

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

Bước 1: Xác định một mảnh bản đồ để chia sẻ hành trình

Bạn xác định bản đồ bằng cách thêm một mảnh bản đồ hoặc chế độ xem để 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 đồ của bạn, làm theo một trong các phương pháp sau:

  • ConsumerMapFragment: Sử dụng để xác định bản đồ của bạn bằng Fragment.

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

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

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

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

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

  1. Xác định mảnh hoặc khung hiển thị trong tệp XML bố cục ứng dụng nằm trong /res/layout. Xác định bản đồ chia sẻ hành trình là một mảnh bằng cách sử dụng ConsumerMapFragment hoặc dưới dạng một khung hiển thị dùng ConsumerMapView.

    Sau đó, mảnh hoặc khung hiển thị cung cấp quyền truy cập vào hành trình chia sẻ bản đồ mà ứng dụng của bạn có thể truy cập và sửa đổi. Bản đồ cũng cung cấp vào ConsumerController để cho phép ứng dụng kiểm soát và tuỳ chỉnh trải nghiệm chia sẻ hành trình.

  2. Từ phương thức onCreate(), hãy gọi getConsumerGoogleMapAsync(callback), Phương thức này 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ụ về mã sau đây.

    <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 đến getConsumerGoogleMapAsync() từ 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 thành phần 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.

     <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 điện đến getConsumerGoogleMapAsync() từ onCreate(). Ngang bằng ngoài thông số callback, hãy bao gồm các thông tin chi tiết sau:

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

    • GoogleMapOptions (có thể để trống), chứa 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 giống với ví dụ trước đó MapView trong một hoạt động, ngoại trừ việc mảnh tăng cườ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ở của bản đồ và trình điều khiển chế độ xem

Để bật tính năng chia sẻ hành trình trong ứng dụng của bạn, hãy thêm phương thức các lớp sau vào ứng dụng của bạn: ConsumerGoogleMap và ConsumerController.

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

    ConsumerGoogleMap là một lớp trình bao bọc cho lớp GoogleMap. Chiến dịch này sử dụng 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 nền tảng bản đồ. Ví dụ: GoogleMap chỉ cho phép một đăng ký lệnh gọi lại duy nhất, nhưng ConsumerGoogleMap hỗ trợ các lệnh gọi lại được đăng ký kép. Các lệnh gọi lại này cho phép các lệnh gọi lại đăng ký ứng dụng đượ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ẻ hành trình như để theo dõi chuyến đi, kiểm soát trạng thái chuyến đi và thiết lập 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ơ trên Android

Nếu thiết kế ứng dụng của bạn cần hỗ trợ đồ hoạ vectơ thì hãy thêm tính năng hỗ trợ cho Thiết bị Android và vectơ vẽ được 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 vectơ vẽ được trong SDK 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() {
  // ...
}

Bước tiếp theo

Theo dõi một chuyến đi trong Android Tạo kiểu cho bản đồ