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

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

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

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

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

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

ขั้นตอนที่ 1: กำหนดส่วนย่อยของแผนที่เพื่อติดตามการเดินทาง

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

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

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

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

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

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

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

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

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

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

  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() นอกเหนือจากพารามิเตอร์ Callback แล้ว ให้ระบุรายละเอียดต่อไปนี้ด้วย

    • กิจกรรมหรือ 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 ในเมธอด onCreateView() ของ 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)
  }
}

ขั้นตอนที่ 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 และ Vector Drawable โดยทำตามขั้นตอนต่อไปนี้

  1. เพิ่มโค้ดต่อไปนี้ลงในกิจกรรม โค้ดนี้ขยาย AppCompatActivity เพื่อใช้ Vector Drawable ใน 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

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