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

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

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

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

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

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

ขั้นตอนที่ 1: กําหนดข้อมูลโค้ดแผนที่เพื่อติดตามการเดินทาง

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

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

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

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

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

เพิ่มข้อมูลหรือมุมมองแผนที่

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

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

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

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

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

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

    • 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 Maps เดียวกันได้อย่างราบรื่น เช่น GoogleMap อนุญาตให้ลงทะเบียนการโทรกลับได้เพียงครั้งเดียว แต่ ConsumerGoogleMap รองรับการโทรกลับที่ลงทะเบียนไว้ 2 รายการ Callbacks เหล่านี้ช่วยให้แอปลงทะเบียน Callbacks ที่เรียกตามลําดับได้

  • รับ 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เพื่อใช้ภาพวาดเวกเตอร์ใน 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

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