این سند نحوه سفارشی کردن ظاهر و احساس یک نقشه و کنترل گزینههای نمای و دید داده را پوشش میدهد. شما می توانید این کار را به روش های زیر انجام دهید:
- از طراحی نقشه مبتنی بر ابر استفاده کنید
- گزینه های سبک نقشه را مستقیماً در کد خود تنظیم کنید
نقشه را با طراحی نقشه های مبتنی بر ابر طراحی کنید
ظاهر و احساس جزء نقشه ها را با استفاده از سبک نقشه های مبتنی بر ابر سفارشی کنید. برای هر یک از برنامههای خود که از Google Maps استفاده میکنند، بدون نیاز به تغییر در کد، سبکهای نقشه را در کنسول Google Cloud ایجاد و ویرایش میکنید. برای اطلاعات بیشتر، پلتفرم خود را در طرحبندی نقشههای مبتنی بر ابر انتخاب کنید.
هر دو کلاس ConsumerMapView
و ConsumerMapFragment
از طراحی نقشه های مبتنی بر ابر پشتیبانی می کنند. به منظور استفاده از طرحبندی نقشههای مبتنی بر ابر، مطمئن شوید که رندر نقشه انتخابشده LATEST
است. بخشهای زیر نمونههایی از نحوه استفاده از طرحبندی نقشههای مبتنی بر ابر در پروژه خود را نشان میدهند.
ConsumerMapView
برای استفاده از طرحبندی نقشههای مبتنی بر ابر در ConsumerMapView
، فیلد mapId
در GoogleMapOptions
تنظیم کنید و GoogleMapOptions
به getConsumerGoogleMapAsync(ConsumerMapReadyCallback، Fragment، GoogleMapOptions) یا getConsumerGoogleMapAsync(ConsumerConsumerCallback,FragdyConsumerCallback) ارسال کنید.
مثال
جاوا
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);
}
}
}
کاتلین
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;
}
}
کاتلین
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
}
}
برای اعمال سبک نقشه در نقشه اشتراک گذاری سفر مصرف کننده جاوا اسکریپت خود، هنگام ایجاد JourneySharingMapView
یک mapId
و هر mapOptions
دیگری را مشخص کنید.
مثال های زیر نحوه اعمال سبک نقشه با شناسه نقشه را نشان می دهد.
جاوا اسکریپت
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
در مرجع API جاوا اسکریپت Google Maps مراجعه کنید.
جاوا اسکریپت
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
و اتصال آن به نشانگر خودرو را نشان می دهد:
جاوا اسکریپت
// 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();
اتصالات خودکار را غیرفعال کنید
با غیرفعال کردن نصب خودکار، میتوانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیشبینیشده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی نمای نقشه اشتراک گذاری سفر نشان می دهد.
جاوا اسکریپت
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,
...
});