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

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

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

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

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

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

ขั้นตอนที่ 1: กำหนด MapFragment เพื่อติดตามการเดินทาง

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

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

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

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

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

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

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

  1. กำหนด Fragment หรือ View ในไฟล์ XML ของเลย์เอาต์แอปพลิเคชันที่อยู่ใน /res/layout กำหนดแผนที่การเดินทางเป็น Fragment โดยใช้ ConsumerMapFragment หรือเป็น View โดยใช้ ConsumerMapView

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

  2. จากเมธอด onCreate() ให้เรียก getConsumerGoogleMapAsync(callback) ซึ่งจะแสดงผล ConsumerGoogleMap แบบไม่พร้อมกันในการเรียกกลับ

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

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

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

    • กิจกรรมหรือ Fragment ที่มี คลาสฐานของกิจกรรมหรือ Fragment ต้องเป็น FragmentActivity หรือ Fragment ของไลบรารีการสนับสนุน (ตามลำดับ) เนื่องจากคลาสเหล่านี้ให้สิทธิ์เข้าถึงวงจรของกิจกรรมหรือ 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 ใน Fragment จะเหมือนกับตัวอย่างก่อนหน้าสำหรับ MapView ในกิจกรรม ยกเว้นว่า Fragment จะขยายเลย์เอาต์ที่มี MapView ในเมธอด Fragment 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 อนุญาตให้ลงทะเบียนการเรียกกลับได้เพียงครั้งเดียว แต่ ConsumerGoogleMap รองรับการเรียกกลับที่ลงทะเบียน 2 ครั้ง 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 และ Vector Drawable โดยทำตามขั้นตอนต่อไปนี้

  1. เพิ่มโค้ดต่อไปนี้ลงในกิจกรรม โค้ดนี้ขยาย AppCompatActivityเพื่อใช้ภาพวาดแบบเวกเตอร์ใน Consumer SDK

Java

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

// ...

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

Kotlin

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

// ...

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

ขั้นตอนถัดไป

ติดตามการเดินทางใน Android

จัดรูปแบบแผนที่