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

Question

我在 Android 上的 Flutter 应用程序中使用 Google 地图样式时遇到问题。我正在使用

google_maps_flutter

插件

version 0.5.30

。我从

Google 地图样式向导 

获得了样式 JSON，通过将刻度盘设置到最左端来抑制所有标签、道路和地标，并从中获取 JSON。我从小部件的

initState()

方法中的资源文件加载该文件，并在 onMapCreated 方法中使用加载的 JSON 调用

mapController.setMapStyle

。调用成功，但地图上仍然显示城市名称。

我尝试在 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.");
      }
   });
  }

}

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

描述自定义地图样式后，

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

---

输出：

Answer 2

从文件中获取地图样式数据：await rootBundle.loadString('assets/themes/map/myCustomStyle.json') - 应提前加载，否则调用下一行代码将不会更新地图样式； 更新 Google 地图样式 - mapController.setMapStyle(StringStyleData);

我建议不要将所有这些样式数据放入一个 JSON 文件中并加载它 - 成本高昂的操作，我建议这样做：

• 个性化并从 https://mapstyle.withgoogle.com/;
获取 JSON 数据
• 将 JSON 放入一个单独的 dart 文件中，如下所示： String or const yourStringName = '''JSON Data Here''';
• 导入您使用分配给 Sting 或 const 的 JSON 数据创建的 dart 文件；
• 随时准备应用并立即更新地图 - mapController.setMapStyle(yourStringName);

Answer 3

我不确定这是否有效，但你可以尝试运行这个

    //loading map style JSON from asset file
    DefaultAssetBundle.of(context).loadString('assets/googleMapStyle1.json').then((string) {
      this.mapStyle = string;
    }).catchError((error) {
      log(error.toString());
    });

在

mapCreated

中，可能是上下文变化的问题

Answer 4

String _mapStyle = "..."

@override
  Widget build(BuildContext context) {
    ...
     GoogleMap(
        style:  _mapStyle,
    )
}