במסמך הזה נסביר איך להתאים אישית את המראה והסגנון של המפה, ואיך לקבוע את רמת החשיפה של הנתונים ואת אפשרויות שדה התצוגה. ניתן לעשות זאת בדרכים הבאות:
- שימוש בעיצוב מפות מבוסס-ענן
- הגדרת אפשרויות של סגנון המפה ישירות בקוד שלכם
עיצוב המפה באמצעות עיצוב מפות מבוסס-ענן
ניתן להתאים אישית את העיצוב והסגנון של רכיב המפות באמצעות עיצוב מפות מבוסס-ענן. אתם יכולים ליצור ולערוך סגנונות מפה במסוף Google Cloud לכל האפליקציות שלכם שמשתמשות במפות Google, בלי צורך לבצע שינויים בקוד. תוכלו לקרוא מידע נוסף במאמר עיצוב מפות מבוסס-ענן.
גם הכיתות 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:
- באופן סטטי עם ה-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" }
]
}
]
}
});
הצגת מידע במפה
להציג מידע נוסף על כלי רכב או על סמן מיקום באמצעות InfoWindow
. מידע נוסף זמין במאמר InfoWindow
.
הדוגמה הבאה ממחישה איך ליצור InfoWindow
ולצרף אותו לסמן של הרכב:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
השבתת התאמה אוטומטית
כדי למנוע מהמפה להתאים את חלון התצוגה באופן אוטומטי לרכב ולמסלול הצפוי, משביתים את ההתאמה האוטומטית. בדוגמה הבאה מוסבר איך להשבית את ההתאמה האוטומטית כשמגדירים את תצוגת המפה של שיתוף המסלול.
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,
...
});