במסמך הזה מוסבר איך להתאים אישית את המראה והתחושה של מפה ואמצעי בקרה אפשרויות החשיפה של הנתונים ואזור התצוגה. ניתן לעשות זאת בדרכים הבאות:
- שימוש בעיצוב מפות מבוסס-ענן
- הגדרת אפשרויות לסגנון מפה ישירות בקוד שלך
עיצוב המפה בעזרת עיצוב מפות מבוסס-ענן
להתאים אישית את המראה והתחושה של רכיב המפות באמצעות מפות מבוססות-ענן לשנות את העיצוב. יוצרים ועורכים סגנונות מפה במסוף Google Cloud עבור כל מהאפליקציות שלך שמשתמשות במפות 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 API של מפות 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. אפשר להשתמש באפשרויות הבאות של הרשאות גישה כדי ליצור קריטריונים:
קביעת החשיפה של רכיב משימה:
האפשרויות של הרשאות הגישה | ||
---|---|---|
מספר העצירות שנותרו משך הזמן עד לשעת ההגעה המשוערת מרחק הנסיעה שנשאר |
מוצג תמיד לא גלוי אף פעם |
לצורך המחשה, נניח שהתאמה אישית לדוגמה משנה את החשיפה של רכיבים של נתונים שמבוססים על הקריטריונים שמוצגים בטבלה הבאה. כל השאר הרכיבים מוגדרים לפי כללי ברירת המחדל של הרשאות הגישה.
רכיב נתונים להתאמה | חשיפה | קריטריון |
---|---|---|
נתיב פוליגוני | הצגה | הרכב נמצא בטווח של 3 עצירות ביניים. |
זמן הגעה משוער | הצגה | מרחק הנסיעה שנותר קצר מ-5,000 מטרים. |
מספר העצירות שנותרו | אל תציג לעולם | הרכב נמצא בטווח של 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 וגם משך הנסיעה שנותר המרחק הוא לפחות 3,000 מטרים. |
השבתת התאמה אוטומטית
אפשר למנוע מהמפה להתאים אוטומטית את אזור התצוגה לרכב ואת המסלול הצפוי באמצעות השבתת ההתאמה האוטומטית. הדוגמה הבאה מראים איך להשבית התאמה אוטומטית כשמגדירים את שיתוף התהליך תצוגת מפה.
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,
...
});