Google 地图 Flutter setMapStyle 未生效 - 城市名称仍显示

Question

我在 Android 上的 Flutter 应用程序中使用 Google 地图样式时遇到问题。我正在使用该google_maps_flutter插件version 0.5.30。我JSON通过将刻度盘设置到最左端来抑制所有标签、道路和地标，并从中获取 JSON，从而从 Google 地图样式向导获得了样式。我正在小部件的initState()方法中从资产文件加载该文件，并在 onMapCreated 方法中mapController.setMapStyle使用加载的 JSON 进行调用。调用成功，但地图上仍显示城市名称。

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

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

以下是我的 Android 平板电脑屏幕截图的链接，其中部署了应用程序，它显示了地图（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.");
      }
   });
  }

}

以下是 asset/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

描述自定义地图样式后，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,
                )
              )
            )
          ],
      ),
    ));
  }

输出：