يتناول هذا المستند كيفية تخصيص مظهر ومظهر الخريطة والتحكم خيارات مستوى رؤية البيانات وإطار العرض. يمكنك إجراء ذلك بالطرق التالية:
- استخدام تصميم الخرائط المستند إلى السحابة الإلكترونية
- يمكنك ضبط خيارات نمط الخريطة مباشرةً في رمزك الخاص
صمِّم الخريطة باستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية
تخصيص شكل ومظهر مكوِّن الخرائط باستخدام الخرائط المستندة إلى السحابة الإلكترونية التصميم. يمكنك إنشاء أنماط الخرائط وتعديلها في Google Cloud Console لأي من تطبيقاتك التي تستخدم خرائط Google، دون الحاجة إلى إجراء أي تغييرات على الرمز. لمزيد من المعلومات، يُرجى مراجعة تصميم الخرائط المستندة إلى السحابة الإلكترونية:
يتم تحديث
ConsumerMapView
و
ConsumerMapFragment
تتيح الفئات تصميم الخرائط المستند إلى السحابة الإلكترونية.
لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية، تأكد من أن الخرائط
قيمة العارض LATEST
. تعرض الأقسام التالية أمثلة على كيفية استخدام هذه الصفحة.
تصميم الخرائط عبر السحابة الإلكترونية مع مشروعك.
ConsumerMapView
لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية في ConsumerMapView
، يجب ضبط
الحقل mapId
على GoogleMapOptions
وتمرير GoogleMapOptions
إلى
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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:
- استخدام ملف 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
}
}
لتطبيق نمط خريطة على خريطة مشاركة رحلة مستخدم JavaScript، حدِّد
mapId
و
أي شيء آخر
mapOptions
عند إنشاء JourneySharingMapView
.
توضح الأمثلة التالية كيفية تطبيق نمط خريطة باستخدام معرّف خريطة.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
تصميم الخرائط مباشرةً باستخدام رمزك الخاص
يمكنك أيضًا تخصيص تصميم الخريطة عن طريق تعيين خيارات الخريطة عند إنشاء
JourneySharingMapView
توضح الأمثلة التالية كيفية تصميم خريطة باستخدام
خيارات الخريطة. لمزيد من المعلومات حول خيارات الخريطة التي يمكنك تعيينها، يمكنك الاطلاع على
mapOptions
في مرجع واجهة برمجة تطبيقات JavaScript لخرائط Google.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
التحكّم في إمكانية رؤية بيانات المهمة في حزمة تطوير البرامج (SDK)
يمكنك التحكم في مستوى رؤية كائنات مهام معينة على الخريطة باستخدام مستوى الرؤية.
إذن الوصول التلقائي لبيانات المهام
بشكل افتراضي، تكون بيانات المهام المخصصة للمركبة مرئية عندما المركبة ضمن 5 محطات للمهمة. ينتهي مستوى الرؤية عندما تكون المهمة مكتملة أو ملغاة.
يعرض هذا الجدول مستوى الظهور التلقائي لكل نوع من المهام. يمكنك تخصيص مستوى الرؤية للعديد من المهام، ولكن ليس كلها. لمزيد من التفاصيل عن المهمة أنواع المهام، راجِع أنواع المهام في دليل المهام المُجدوَلة.
نوع المهمة | مستوى الظهور التلقائي | قابلة للتخصيص؟ | الوصف |
---|---|---|---|
مهام عدم التوفّر | غير مرئية | لا | تُستخدَم لفترات الراحة للسائق وإعادة الشحن. إذا تم التوجيه إلى مهمة تسليم يحتوي أيضًا على محطة أخرى للمركبات، لا تظهر هذه المحطة إذا كانت تتضمّن مهام عدم التوفّر فقط الوقت المقدَّر للوصول ولا يزال الوقت المقدر لإكمال المهمة يظهر لعملية التسليم المهمة نفسها. |
فتح مهام المركبات | مرئي | نعم | ينتهي مستوى العرض عند اكتمال المهمة أو إلغائها. يمكنك تخصيص إذن الوصول إلى مهام المركبات المفتوحة. عرض تخصيص مستوى رؤية الإعلانات المفتوحة مهام المركبات. |
مهام المركبات المغلقة | غير مرئية | لا | لا يمكنك تخصيص إذن الوصول إلى المهام الخاصة بالمركبات المغلقة. |
تخصيص إذن الوصول إلى مهام المركبات المفتوحة
توفّر واجهة TaskTrackingInfo
عددًا من عناصر بيانات المهام
التي يمكن إظهارها باستخدام
حزمة تطوير البرامج (SDK) الخاصة بالمستهلك
عناصر بيانات المهام القابلة للتخصيص | |
---|---|
الخطوط المتعددة في المسار الوقت المقدَّر للوصول الوقت المقدَّر لإكمال المهمة |
المسافة المتبقية بالسيارة للوصول إلى المهمة عدد المحطات المتبقية الموقع الجغرافي للمركبة |
خيارات مستوى الرؤية لكل مهمة
يمكنك تخصيص ضبط مستوى الرؤية لكل مهمة على حدة من خلال ضبط
TaskTrackingViewConfig
عند إنشاء مهمة أو تعديلها ضمن
Fleet Engine استخدِم خيارات مستوى العرض التالية لإنشاء معايير من أجل
لتحديد مستوى رؤية عنصر المهمة:
خيارات مستوى الرؤية | ||
---|---|---|
عدد المحطات المتبقية المدة حتى وقت الوصول المقدّر المسافة المقطوعة أثناء القيادة |
مرئي دائمًا غير مرئية مطلقًا |
للتوضيح، لنفترض أن أحد الأمثلة على التخصيص يضبط مستوى الرؤية لثلاثة باستخدام المعايير الموضحة في الجدول التالي. كل ما غير ذلك تتبع قواعد مستوى الرؤية التلقائية.
عنصر البيانات المطلوب تعديله | مستوى الرؤية | المعيار |
---|---|---|
خطوط متعددة في المسار | إظهار | وتبعد المركبة عن 3 محطات. |
الوقت المُقدّر للوصول | إظهار | مسافة القيادة المتبقية أقصر من 5000 متر. |
عدد المحطات المتبقية | عدم الإظهار مطلقًا | وتبعد المركبة عن 3 محطات. |
يوضّح المثال التالي هذه الإعدادات:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
الخطوط المتعددة على المسار وقواعد ظهور الموقع الجغرافي للمركبة
لا يمكن ظهور الخطوط المتعددة للمسار ما لم يكن الموقع الجغرافي للمركبة أيضًا مرئيًا. visible; بخلاف ذلك، يمكن استنتاج موقع المركبة في نهاية متعدد الخطوط.
تساعدك هذه الإرشادات على توفير مجموعة صالحة للمسار خيارات ظهور الخطوط المتعددة أو الموقع الجغرافي للمركبة
خيارات مستوى العرض نفسها | معيار مستوى الرؤية | الإرشادات |
---|---|---|
تم ضبط خيارات الخطوط المتعددة للمسار على "مرئية دائمًا". | اضبط الموقع الجغرافي للمركبة على "مرئي دائمًا". | |
تم ضبط الموقع الجغرافي للمركبة على عدم رؤيته أبدًا. | اضبط الخطوط المتعددة للمسار على "عدم ظهورها أبدًا". | |
خيار مستوى الرؤية هو أي مما يلي:
|
ضبط خيارات الخطوط المتعددة للمسار على قيمة أقل من أو تساوي القيمة المحدَّدة لموقع المركبة. على سبيل المثال: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
الخيارات المختلفة لمستوى الرؤية | معايير مستوى العرض | الإرشادات |
الموقع الجغرافي للمركبة مرئي | ولا يحدث ذلك إلا عندما يحدث كل من موقع المركبة تمت الموافقة على خيارات ظهور الخطوط المتعددة. على سبيل المثال: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } في هذا المثال، لا يكون الموقع الجغرافي للمركبة مرئيًا إلا إذا كانت عدد محطات التوقف 3 على الأقل والقيادة المتبقية المسافة لا تقل عن 3000 متر. |
إيقاف الاحتواء التلقائي
يمكنك منع احتواء الخريطة تلقائيًا على إطار العرض في المركبة. والمسار المتوقع من خلال تعطيل التوافق التلقائي. المثال التالي كيفية إيقاف الملاءمة التلقائية عند ضبط مشاركة الرحلة عرض الخريطة.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});