หากต้องการติดตามการเดินทางในแอปสำหรับผู้บริโภค คุณต้องกำหนดแผนที่และเพิ่มการรองรับแผนที่เวกเตอร์ก่อน หากจำเป็น
หากต้องการตั้งค่าแผนที่ในแอป ให้ทำตามขั้นตอนต่อไปนี้
- กำหนดข้อมูลโค้ดแผนที่เพื่อติดตามการเดินทาง
- เพิ่มการรองรับเลเยอร์ฐานแผนที่และตัวควบคุมมุมมอง
- เพิ่มการรองรับกราฟิกเวกเตอร์ของ Android เพื่อแสดงแผนที่เวกเตอร์ หากจำเป็น
หลังจากกําหนดแผนที่แล้ว คุณสามารถเพิ่มมุมมองและการควบคุมกล้องเพิ่มเติมที่ต้องการปรับแต่งประสบการณ์ภาพ ดูรายละเอียดเพิ่มเติมได้ที่จัดสไตล์แผนที่
ขั้นตอนที่ 1: กําหนดข้อมูลโค้ดแผนที่เพื่อติดตามการเดินทาง
คุณกำหนดแผนที่ได้โดยเพิ่มข้อมูลโค้ดหรือมุมมองแผนที่เพื่อสร้างแผนที่ที่คุณแชร์การเดินทางแบบออนดีมานด์ในแอปสำหรับผู้บริโภค โดยทำตามวิธีใดวิธีหนึ่งต่อไปนี้
ConsumerMapFragment
: ใช้เพื่อกำหนดแผนที่ด้วยFragment
ConsumerMapView
: ใช้เพื่อกำหนดแผนที่ที่มีView
ฟีเจอร์จะเหมือนกันสำหรับทั้ง 2 วิธี ดังนั้นให้เลือกวิธีที่เหมาะกับแอปพลิเคชันของคุณมากกว่า
ในส่วนต่อไปนี้จะอธิบายทั้ง 2 วิธีโดยละเอียด
เพิ่มข้อมูลโค้ดหรือมุมมองแผนที่
หากต้องการสร้างแผนที่เพื่อแสดงความคืบหน้าของการเดินทางโดยใช้เศษโค้ด Android หรือมุมมอง ให้ทําตามขั้นตอนเหล่านี้และดูตัวอย่างโค้ด
กําหนดข้อมูลโค้ดหรือมุมมองในไฟล์ XML เลย์เอาต์แอปพลิเคชันที่อยู่ใน
/res/layout
กําหนดแผนที่การเดินทางเป็นข้อมูลโค้ดโดยใช้ConsumerMapFragment
หรือเป็นมุมมองโดยใช้ConsumerMapView
จากนั้น ข้อมูลโค้ดหรือมุมมองจะมอบสิทธิ์เข้าถึงแผนการเดินทางที่แอปของคุณเข้าถึงและแก้ไขได้ แผนที่ยังมีแฮนเดิลสำหรับ
ConsumerController
ด้วย ซึ่งช่วยให้แอปควบคุมและปรับแต่งประสบการณ์ของผู้บริโภคได้จากเมธอด
onCreate()
ให้เรียกgetConsumerGoogleMapAsync(callback)
ซึ่งจะแสดงผลConsumerGoogleMap
แบบไม่พร้อมกันในการเรียกกลับใช้
ConsumerGoogleMap
เพื่อแสดงความคืบหน้าของการเดินทางและอัปเดตตามต้องการ
ตัวอย่างวิธีเพิ่ม ConsumerMapFragment
กําหนดข้อมูลโค้ดในไฟล์ 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" />
โทรหา
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
ใช้มุมมองในฟรแกรมหรือในกิจกรรมตามที่ระบุไว้ในไฟล์ 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" />
โทรหา
getConsumerGoogleMapAsync()
จากonCreate()
นอกจากพารามิเตอร์การเรียกกลับแล้ว ให้ใส่รายละเอียดต่อไปนี้ด้วยกิจกรรมหรือส่วนที่รวมอยู่ คลาสพื้นฐานของกิจกรรมหรือฟragment ต้องเป็น
FragmentActivity
หรือFragment
(ตามลำดับ) เนื่องจากคลาสเหล่านี้ให้สิทธิ์เข้าถึงวงจรของกิจกรรมหรือฟragmentGoogleMapOptions
(ซึ่งอาจเป็นค่าว่าง) ที่มีแอตทริบิวต์การกําหนดค่าสําหรับ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 และภาพวาดเวกเตอร์โดยทำตามขั้นตอนต่อไปนี้
- เพิ่มโค้ดต่อไปนี้ลงในกิจกรรม โค้ดนี้ขยาย
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() {
// ...
}