google-maps - Google Maps Flutter setMapStyle 未生效 - 城市名称仍在显示

Question

我在让 Google map 样式在我的 Android 上的 Flutter 应用程序中工作时遇到问题。我正在使用 google_maps_flutter 插件 version 0.5.30。我从 Google Maps Styling wizard 获得了样式 JSON通过将表盘设置到最左侧并从中获取 JSON 来抑制所有标签、道路和地标。我正在我的小部件的 initState() 方法中的 Assets 文件中加载它，并且在 onMapCreated 方法中使用加载的 JSON 调用 mapController.setMapStyle。调用成功，但 map 仍显示城市名称。

我尝试在 setMapStyle 调用之后调用 setState，而不是将 setMapStyle() 调用放在 setState(() {..}) 中，但这也不起作用。

以下是指向 Google map 样式向导的链接，其中相同的 JSON 不显示城市或任何标签。 https://1drv.ms/u/s!AoeWKBC0aN0DhoA8qIr3SehO1o4UhQ

以下是我的 Android 平板电脑屏幕截图的链接，其中部署了应用程序，它显示了 map (mapStyle 使用相同的 JSON)，但它显示了城市和省份名称。 https://1drv.ms/u/s!AoeWKBC0aN0DhoA7MOALo0w7NWixuA?e=BKw9fu

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        ),
      home: MyHomePage(title: 'Flutter Google MapsPage'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleMapController mapController;
  String mapStyle;

  // following are lat/long of Anantapur which is roughly at the
  // center of South India
  final LatLng center = const LatLng(14.68, 77.6);

  double INITIAL_ZOOM=6.0;
  @override
  void initState() {
    super.initState();
    //loading map style JSON from asset file
    DefaultAssetBundle.of(context).loadString('assets/googleMapStyle1.json').then((string) {
      this.mapStyle = string;
    }).catchError((error) {
      log(error.toString());
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: <Widget>[
            Expanded(
              child: GoogleMap(
                onMapCreated: mapCreated,
                mapType: MapType.terrain,
                initialCameraPosition: CameraPosition(
                  target: center,
                  zoom: INITIAL_ZOOM,
                )
              )
            )
          ],
      ),
    ));
  }

  void mapCreated(GoogleMapController controller) {
    //set style on the map on creation to customize look showing only map features
    //we want to show.
    log(this.mapStyle);
    setState(() {
      this.mapController = controller;
      if (mapStyle != null) {
        this.mapController.setMapStyle(this.mapStyle).
        then((value) {
          log("Map Style set");

        }).catchError((error) =>
            log("Error setting map style:" + error.toString()));
      }
      else {
        log(
            "GoogleMapView:_onMapCreated: Map style could not be loaded.");
      }
   });
  }

}

以下是 assets/googleMapStyle1.json 中的 JSON:

[
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

以下是我的 pubspec.yaml:

name: googlemapsstyling
description: Google Maps Flutter styling issuue

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev


version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^0.5.30

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
      - assets/googleMapStyle1.json

任何指向我做错了什么或者这是一个错误的指针？

Answer 1

在您描述了您的自定义 map 样式后，mapType: MapType.terrain, 会覆盖 GoogleMap 小部件中的自定义主题。

更新的代码在下面，或者只是注释掉或删除 maptype: 行。

---

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: <Widget>[
            Expanded(
              child: GoogleMap(
                onMapCreated: mapCreated,
                //mapType: MapType.terrain, //This was causing the problem
                initialCameraPosition: CameraPosition(
                  target: center,
                  zoom: _initialZoom,
                )
              )
            )
          ],
      ),
    ));
  }

---

输出: