คู่มือนี้จะอธิบายวิธีปรับแต่งแผนที่ที่แสดงในแอป Android เมื่อคุณติดตามการเดินทาง คุณสามารถปรับแต่งรูปลักษณ์และความรู้สึก ของแผนที่ได้ด้วยวิธีต่อไปนี้
- จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
- ปรับกล้องให้มุ่งเน้นที่การเดินทาง
- ปรับแต่งเครื่องหมาย
- ปรับแต่งเส้นประกอบ
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ คุณสามารถสร้างและแก้ไขรูปแบบแผนที่ในคอนโซล Google Cloud สำหรับแอปใดก็ได้ที่ใช้ Google Maps โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย ดูข้อมูลเพิ่มเติมได้ที่การจัดรูปแบบแผนที่ในระบบคลาวด์
ทั้งชั้นเรียน ConsumerMapView
และ ConsumerMapFragment
รองรับการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ โปรดตรวจสอบว่าเครื่องมือแสดงผลแผนที่ที่เลือกคือ LATEST
ส่วนต่อไปนี้จะแสดงตัวอย่างวิธีใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับโปรเจ็กต์ของคุณ
ConsumerMapView
หากต้องการใช้การจัดรูปแบบแผนที่ที่อิงตามระบบคลาวด์ใน ConsumerMapView
ให้ตั้งค่าช่อง mapId
ใน GoogleMapOptions
แล้วส่ง GoogleMapOptions
ไปยัง getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions) หรือ getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
ตัวอย่าง
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ใน ConsumerMapFragments ได้ 2 วิธี ดังนี้
- แบบคงที่กับ XML
- แบบไดนามิกด้วย
newInstance
แบบคงที่ที่มี XML
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ XML ใน ConsumerMapFragment
ให้เพิ่มแอตทริบิวต์ XML map:mapId
ที่มี mapId
ที่ระบุ โปรดดูตัวอย่างต่อไปนี้
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
แบบไดนามิกด้วย newInstance
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ newInstance
ใน
ConsumerMapFragment
ให้ตั้งค่าช่อง mapId
ใน GoogleMapOptions
และส่ง GoogleMapOptions
ไปยัง newInstance
โปรดดูตัวอย่างต่อไปนี้
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
ปรับการซูมของกล้องเพื่อโฟกัสการเดินทาง
ระหว่างเซสชันการแชร์การเดินทางที่ใช้งานอยู่ คุณสามารถจัดการการซูมและโฟกัสของกล้องได้ 2 วิธี ดังนี้
AutoCamera
: หากต้องการใช้AutoCamera
คุณไม่จำเป็นต้องดำเนินการใดๆ กล้องจะติดตามการเดินทาง ดูรายละเอียดได้ที่AutoCamera
ปรับแต่งลักษณะการทำงานของกล้อง: หากต้องการปรับแต่งลักษณะการทำงานของกล้อง คุณต้องปิดใช้
AutoCamera
แล้วทำการปรับแต่ง โปรดดูรายละเอียดที่หัวข้อปรับแต่งลักษณะการทำงานของกล้อง
AutoCamera
จัดกล้องให้อยู่ตรงกลาง
Consumer SDK มีฟีเจอร์ AutoCamera
ที่เปิดใช้โดยค่าเริ่มต้นบนปุ่มตำแหน่งของฉันในตัวสำหรับ Maps SDK กล้องจะซูมเพื่อโฟกัสที่เส้นทางการเดินทางและจุดอ้างอิงของการเดินทางถัดไป
หากต้องการใช้ AutoCamera
โปรดเปิดใช้ ดูรายละเอียดเพิ่มเติมได้ที่ isAutoCameraEnabled
สำหรับรายละเอียดเกี่ยวกับปุ่มตำแหน่งของฉัน โปรดดูปุ่มตำแหน่งของฉันในเอกสารประกอบของ Maps JavaScript API
ปรับแต่งลักษณะการทำงานของกล้อง
หากต้องการควบคุมลักษณะการทำงานของกล้องได้มากขึ้น ให้ทำตามขั้นตอนเหล่านี้เพื่อปิดใช้ AutoCamera
และปรับแต่งลักษณะการทำงานของกล้องด้วยตนเอง
ปิดใช้
AutoCamera
โดยใช้ ConsumerController.setAutoCameraEnabled()รับขอบเขตกล้องที่แนะนำโดยใช้ ConsumerController.getCameraUpdate()
ระบุ
CameraUpdate
เป็นอาร์กิวเมนต์ของฟังก์ชัน Android รายการใดรายการหนึ่งต่อไปนี้