此页面由 Cloud Translation API 翻译。

设置地图样式

若要自定义地图组件的外观和风格，请设置地图样式使用云端地图样式设置或直接在代码中设置选项。

使用云端地图样式设置设置地图样式

使用云端地图自定义地图组件的外观和风格样式。您可以在 Google Cloud 控制台上创建和修改地图样式，而无需更改任何代码。如需了解详情，请参阅云端地图样式设置。

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`

在 ConsumerMapFragment 中使用云端地图样式设置的方法有两种：

使用 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，在 GoogleMapOptions 上设置 mapId 字段，并传递从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.

以下示例展示了如何使用地图 ID 应用地图样式。

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。以下示例展示了如何使用地图选项。如需详细了解您可以设置哪些地图选项，请参阅 Google Maps JavaScript API 参考中的 mapOptions。

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" }
        ]
      }
    ]
  }
});

停用自动调整

您可以阻止地图自动根据车辆调整视口和预期路线。以下示例展示了如何在配置历程共享时停用自动拟合地图视图。

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,
  ...
});

替换现有地图

您可以替换包含标记或其他自定义设置的现有地图而不会丢失这些自定义设置

例如，假设您有一个包含标准 google.maps.Map 的网页显示标记的实体：

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    // Initialize and add the map
    function initMap() {
      // The location of Pier 39 in San Francisco
      var pier39 = {lat: 37.809326, lng: -122.409981};
      // The map, initially centered at Mountain View, CA.
      var map = new google.maps.Map(document.getElementById('map'));
      map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

      // The marker, now positioned at Pier 39
      var marker = new google.maps.Marker({position: pier39, map: map});
    }
        </script>
        <!-- Load the API from the specified URL.
           * The async attribute allows the browser to render the page while the API loads.
           * The key parameter will contain your own API key (which is not needed for this tutorial).
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

如需添加 JavaScript 舰队跟踪库，请执行以下操作：

添加身份验证令牌工厂的代码。
在 initMap() 函数中初始化位置信息提供程序。
在 initMap() 函数中初始化地图视图。该视图包含地图。
将您的自定义设置移到地图视图初始化的回调函数中。
将位置信息库添加到 API 加载器。

使用计划任务的地图替换示例

以下示例展示了如何使用现有映射，在其中为安排的任务用例初始化位置信息提供程序对象。代码与此类似按需行程用例除外，但使用 FleetEngineVehicleLocationProvider，而不是 FleetEngineDeliveryVehicleLocationProvider。

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    let locationProvider;

    // (1) Authentication Token Fetcher
    function authTokenFetcher(options) {
      // options is a record containing two keys called
      // serviceType and context. The developer should
      // generate the correct SERVER_TOKEN_URL and request
      // based on the values of these fields.
      const response = await fetch(SERVER_TOKEN_URL);
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const data = await response.json();
          return {
            token: data.Token,
            expiresInSeconds: data.ExpiresInSeconds
          };
    }

    // Initialize and add the map
    function initMap() {
      // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
      // as appropriate.
      locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
        YOUR_PROVIDER_ID,
        authTokenFetcher,
      });

      // (3) Initialize map view (which contains the map).
      const mapView = new google.maps.journeySharing.JourneySharingMapView({
        element: document.getElementById('map'),
        locationProviders: [locationProvider],
        // any styling options
      });

    mapView.addListener('ready', () => {
      locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

        // (4) Add customizations like before.
        // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
        // The map, initially centered at Mountain View, CA.
        var map = mapView.map;
        map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
        // The marker, now positioned at Pier 39
        var marker = new google.maps.Marker({position: pier39, map: map});
      };
    }
        </script>
        <!-- Load the API from the specified URL
          * The async attribute allows the browser to render the page while the API loads
          * The key parameter will contain your own API key (which is not needed for this tutorial)
          * The callback parameter executes the initMap() function
          *
          * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
        -->
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
        </script>
      </body>
    </html>

如果您运营配送车辆 39 号码头附近的指定 ID，现在就会显示在地图上。

设置地图样式

使用云端地图样式设置设置地图样式

ConsumerMapView

示例

Java

Kotlin

ConsumerMapFragment

使用 XML 进行静态设置

使用 newInstance 动态

Java

Kotlin

JavaScript

TypeScript

直接在您自己的代码中设置地图样式

JavaScript

TypeScript

停用自动调整

JavaScript

TypeScript

替换现有地图

使用计划任务的地图替换示例

后续步骤

`ConsumerMapView`

`ConsumerMapFragment`

使用 `newInstance` 动态