به یک نقشه سبک دهید

پلتفرم را انتخاب کنید: Android iOS JavaScript

این سند نحوه سفارشی کردن ظاهر و احساس یک نقشه و کنترل گزینه‌های نمای و دید داده را پوشش می‌دهد. شما می توانید این کار را به روش های زیر انجام دهید:

  • از طراحی نقشه مبتنی بر ابر استفاده کنید
  • گزینه های سبک نقشه را مستقیماً در کد خود تنظیم کنید

نقشه را با طراحی نقشه های مبتنی بر ابر طراحی کنید

ظاهر و احساس جزء نقشه ها را با استفاده از سبک نقشه های مبتنی بر ابر سفارشی کنید. برای هر یک از برنامه‌های خود که از 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,
  ...
});

بعدش چی

نشانگرها را سفارشی کنید