ตั้งค่าแผนที่

เลือกแพลตฟอร์ม Android iOS

หากต้องการติดตามการเดินทางในแอปสำหรับผู้บริโภค ก่อนอื่นคุณต้องกำหนด แผนที่และเพิ่มการสนับสนุนแผนที่เวกเตอร์ หากจำเป็น

หากต้องการตั้งค่าแผนที่ในแอป ให้ทำตามขั้นตอนต่อไปนี้

  1. กำหนดส่วนย่อยของแผนที่สำหรับการแชร์เส้นทาง
  2. เพิ่มการรองรับเลเยอร์ฐานของแผนที่และมุมมองตัวควบคุม
  3. เพิ่มการสนับสนุนกราฟิกเวกเตอร์ของ Android เพื่อแสดงเวกเตอร์ แผนที่ หากจำเป็น

หลังจากกำหนดแผนที่แล้ว คุณสามารถเพิ่มมุมมองและกล้องเพิ่มเติมได้ ที่คุณต้องการปรับแต่งประสบการณ์การมองเห็น สำหรับรายละเอียดเพิ่มเติม ดูจัดรูปแบบแผนที่

ขั้นตอนที่ 1: กำหนดส่วนย่อยของแผนที่สำหรับการแชร์เส้นทาง

คุณสามารถกำหนดแผนที่โดยเพิ่มส่วนย่อยหรือมุมมองของแผนที่เพื่อสร้างแผนที่ที่ คุณแชร์การเดินทางแบบออนดีมานด์ในแอปผู้บริโภค หากต้องการกำหนดแผนที่ ให้ทำตามวิธีใดวิธีหนึ่งต่อไปนี้

  • ConsumerMapFragment: ใช้เพื่อกำหนดแผนที่ของคุณด้วย Fragment

  • ConsumerMapView: ใช้เพื่อกำหนดแผนที่ด้วย View

แต่ละวิธีจะเหมือนกัน คุณจึงเลือกวิธีการใดก็ได้ เหมาะกับแอปพลิเคชันของคุณมากกว่า

เราจะอธิบายรายละเอียดเพิ่มเติมของทั้ง 2 วิธีไว้ในส่วนต่อไปนี้

เพิ่มส่วนย่อยหรือมุมมองแผนที่

ในการสร้างแผนที่เพื่อแสดงความคืบหน้าของการเดินทางโดยใช้ ส่วนย่อยของ Android หรือมุมมอง ให้ทำตามขั้นตอนต่อไปนี้และอ้างถึง ตัวอย่างโค้ด

  1. กำหนดส่วนย่อยหรือมุมมองในไฟล์ XML การจัดวางแอปพลิเคชันของคุณใน /res/layout กำหนดแผนที่การแชร์การเดินทางเป็นส่วนย่อยโดยใช้ ConsumerMapFragment, หรือเป็นการแสดงผลโดยใช้ ConsumerMapView

    จากนั้นส่วนย่อยหรือมุมมองจะให้สิทธิ์เข้าถึงการเดินทาง กำลังแชร์แผนที่ที่แอปของคุณสามารถเข้าถึงและแก้ไขได้ แผนที่ยังมี จัดการกับ ConsumerController ซึ่งทำให้แอปของคุณควบคุมและ ปรับแต่งประสบการณ์การแชร์เส้นทาง

  2. จากเมธอด onCreate() ของคุณ ให้โทรหา getConsumerGoogleMapAsync(callback) ซึ่งจะแสดงผล ConsumerGoogleMap แบบไม่พร้อมกันใน Callback

  3. ใช้ ConsumerGoogleMap เพื่อแสดงความคืบหน้าของการเดินทางและอัปเดตตามที่จำเป็น

ตัวอย่างวิธีเพิ่ม ConsumerMapFragment

  1. กำหนดส่วนย่อยในไฟล์ XML สำหรับเลย์เอาต์ของแอปพลิเคชันของคุณ ดังที่แสดงใน ตัวอย่างโค้ดต่อไปนี้

    <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. โทรออกไปยัง getConsumerGoogleMapAsync() จาก 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()!!
         }
       }
     )
   }
 }

ตัวอย่างวิธีเพิ่ม ConsumerMapView

  1. ใช้มุมมองในส่วนย่อยหรือในกิจกรรม ตามที่ระบุไว้ใน ไฟล์ 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. โทรออกไปยัง getConsumerGoogleMapAsync() จาก onCreate() ใน นอกเหนือจากพารามิเตอร์ Callback โปรดระบุรายละเอียดต่อไปนี้

    • กิจกรรมหรือส่วนย่อยที่มี กิจกรรมหรือฐานส่วนย่อย คลาสต้องเป็น FragmentActivity หรือ Fragment การสนับสนุน (ตามลำดับ) เนื่องจากมอบการเข้าถึงตามวงจรของลูกค้า

    • GoogleMapOptions (อาจเป็นค่าว่าง) ที่มีการกำหนดค่า สำหรับ 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 ในส่วนย่อยเหมือนกับตัวอย่างก่อนหน้านี้สำหรับ MapViewในกิจกรรม เว้นแต่ส่วนย่อยพองในเลย์เอาต์ที่ รวม MapView ในเมธอด onCreateView()

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

ขั้นตอนที่ 2: เพิ่มการรองรับเลเยอร์ฐานของแผนที่และดูตัวควบคุม

หากต้องการเปิดใช้การแชร์เส้นทางในแอป ให้เพิ่ม ชั้นเรียนต่อไปนี้ในแอปของคุณ: ConsumerGoogleMap และ ConsumerController

  • รับ ConsumerGoogleMap จาก ConsumerMapFragment หรือ ConsumerMapView ซึ่งทั้ง 2 อย่างนี้แสดงผลแบบไม่พร้อมกัน ConsumerGoogleMap ใน ConsumerMapReadyCallback

    ConsumerGoogleMap คือคลาส Wrapper สำหรับคลาส GoogleMap โดยใช้ API ที่เทียบเท่ากับ GoogleMap เพื่อให้แอปของคุณโต้ตอบกับแผนที่ได้ ด้วยวิธีนี้ แอปของคุณจะสามารถโต้ตอบกับ Google แผนที่ ตัวอย่างเช่น GoogleMap อนุญาตให้ลงทะเบียน Callback เพียงครั้งเดียว แต่ ConsumerGoogleMap รองรับ Callback ที่ลงทะเบียนแบบคู่ Callback เหล่านี้ช่วยให้ แอปของคุณจะลงทะเบียน Callback ที่มีการเรียกใช้ตามลำดับ

  • รับ ConsumerController จาก ConsumerGoogleMap ใน getConsumerController()

    ConsumerController ให้สิทธิ์เข้าถึงฟีเจอร์การแชร์เส้นทาง เช่น เช่น ติดตามการเดินทาง ควบคุมสถานะการเดินทาง และกำหนดสถานที่

สำหรับวิธีเพิ่ม ConsumerGoogleMap และ ConsumerController ลงในแอปของคุณใน Java และ Kotlin ดูตัวอย่างต่อไปนี้

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

ขั้นตอนที่ 3: เพิ่มการรองรับกราฟิกเวกเตอร์ของ Android

หากการออกแบบแอปกำหนดให้ต้องมีการรองรับกราฟิกเวกเตอร์ ให้เพิ่มการรองรับสำหรับ อุปกรณ์ Android และเวกเตอร์ที่ถอนออกได้โดยทำตามขั้นตอนต่อไปนี้

  1. เพิ่มโค้ดต่อไปนี้ลงในกิจกรรม รหัสนี้ครอบคลุมถึง AppCompatActivity เพื่อใช้เวกเตอร์ที่ถอนออกได้ใน SDK ของผู้บริโภค

Java

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

// ...

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

Kotlin

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

// ...

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

ขั้นต่อไปคืออะไร

ติดตามการเดินทางใน Android จัดรูปแบบแผนที่