คู่มือนี้อธิบายวิธีปรับแต่งแผนที่ที่แสดงในแอป Android เมื่อคุณติดตามการเดินทาง คุณปรับแต่งรูปลักษณ์ของแผนที่ได้ด้วยวิธีต่อไปนี้
- จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
- ปรับกล้องให้โฟกัสที่การเดินทาง
- ปรับแต่งเครื่องหมาย
- ปรับแต่งเส้นหลายส่วน
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ คุณสร้างและแก้ไขรูปแบบแผนที่ใน Google Cloud Console สำหรับแอปใดก็ได้ที่ใช้ 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 อย่างใดอย่างหนึ่งต่อไปนี้