يصف هذا الدليل الطرق التي يمكنك من خلالها تخصيص الخريطة التي تظهر في تطبيق Android عند تتبُّع رحلة. يمكنك تخصيص مظهر الخريطة وطريقة تفاعلك معها بالطرق التالية:
- تنسيق الخريطة باستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية
- ضبط الكاميرا للتركيز على الرحلة
- تخصيص العلامات
- تخصيص الخطوط المتعددة
تنسيق الخريطة باستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية
يمكنك تخصيص مظهر مكوّن الخرائط وطريقة تفاعلك معه باستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية. يمكنك إنشاء أنماط الخرائط وتعديلها على Google Cloud Console لأي من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز البرمجي. لمزيد من المعلومات، اختَر نظامك الأساسي في مقالة تصميم الخرائط المستند إلى السحابة الإلكترونية.
تتوافق كلٌّ من الفئتَين
ConsumerMapView
و
ConsumerMapFragment
مع تصميم الخرائط المستند إلى السحابة الإلكترونية.
لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية، تأكَّد من أنّ أداة عرض الخرائط المختارة هي LATEST. توضِّح الأقسام التالية أمثلة على كيفية استخدام تصميم الخرائط المستند إلى السحابة الإلكترونية مع مشروعك.
ConsumerMapView
لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية في ConsumerMapView، اضبط الحقل
mapId على GoogleMapOptions ومرِّر GoogleMapOptions إلى
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
أو getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
مثال
جافا
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:
- بشكل ثابت باستخدام XML
- بشكل ديناميكي باستخدام
newInstance
بشكل ثابت باستخدام XML
لاستخدام تصميم الخرائط باستخدام السحابة الإلكترونية مع تنسيق XML في الـ
ConsumerMapFragment، أضِف السمة map:mapId في تنسيق XML مع الـ
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. انظر المثال التالي:
جافا
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
}
}
ضبط مستوى تكبير/تصغير الكاميرا للتركيز على رحلة
أثناء جلسة نشطة لمشاركة الرحلة، يمكنك التعامل مع مستوى تكبير/تصغير الكاميرا والتركيز عليها بإحدى الطريقتَين التاليتَين:
AutoCamera: إذا أردت استخدامAutoCamera، ليس عليك إجراء أي تغييرات. تتتبّع الكاميرا الرحلة. لمعرفة التفاصيل، يُرجى الاطّلاع علىAutoCamera.تخصيص سلوك الكاميرا: لتخصيص سلوك الكاميرا، عليك إيقاف
AutoCameraثم إجراء التخصيصات. لمعرفة التفاصيل، يُرجى الاطّلاع على تخصيص سلوك الكاميرا.
توسيط الكاميرا باستخدام AutoCamera
توفّر حزمة تطوير البرامج (SDK) للمستهلكين ميزة AutoCamera التي تكون مفعَّلة تلقائيًا على الزرّ موقعي الجغرافي المضمّن في حزمة تطوير البرامج (SDK) لخرائط Google. تُكبِّر الكاميرا للتركيز على مسار الرحلة ونقطة الطريق التالية.
إذا أردت استخدام AutoCamera، تأكَّد من تفعيلها. لمزيد من التفاصيل، يُرجى الاطّلاع على
isAutoCameraEnabled.
لمعرفة تفاصيل الزرّ موقعي الجغرافي ، يُرجى الاطّلاع على الزرّ "موقعي الجغرافي" في مستندات Maps JavaScript API.
تخصيص سلوك الكاميرا
للحصول على مزيد من التحكّم في سلوك الكاميرا، اتّبِع الخطوات التالية لإيقاف AutoCamera وتخصيص سلوك الكاميرا يدويًا.
أوقِف
AutoCameraباستخدام ConsumerController.setAutoCameraEnabled().احصل على حدود الكاميرا المقترَحة باستخدام ConsumerController.getCameraUpdate().
قدِّم
CameraUpdateكمعلَمة لإحدى وظائف Android التالية: