Question

在使用https://mapstyle.withgoogle.com/生成与我想要的内容相对应的json之后，我尝试将自己的样式添加到GoogleMap小部件中。

我已经研究了google_map_flutter插件，以查看可以覆盖以添加样式的所有属性，但找不到任何属性。

一些经验丰富的Flutter用户可能会有所了解，并从何处着手，我将不胜感激！

Answer 1

复制JSON并以txt格式保存文件。将此文件添加到Flutter项目的资产中，方法是将其放置在资产文件夹中，并在pubspec.yaml

中指定它

 flutter:  
  assets:
    - assets/map_style.txt

在您的GoogleMap小部件所在的State类中，添加以下导入语句：

import 'package:flutter/services.dart' show rootBundle;

并添加一个以字符串格式表示您的样式的字段：

String _mapStyle;

我们现在可以将txt文件作为字符串加载，并将其输入到_mapStyle字段中。我们从State类的initState方法中进行此操作：

@override
void initState() {
  super.initState();

  rootBundle.loadString('assets/map_style.txt').then((string) {
    _mapStyle = string;
  });
}

现在，当初始化GoogleMap小部件及其相应的GoogleMapController,时，请按照以下方式设置样式：

GoogleMapController mapController;
GoogleMap(
  onMapCreated: (GoogleMapController controller) {
    mapController = controller;
    mapController.setMapStyle(_mapStyle);
  }

您完成了！现在，地图将加载您的自定义样式，您可以根据需要在map_style.txt中简单地编辑样式。 方法2

GoogleMapController mapController;
void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    mapController.setMapStyle('[{"featureType": "all","stylers": [{ "color": "#C0C0C0" }]},{"featureType": "road.arterial","elementType": "geometry","stylers": [{ "color": "#CCFFFF" }]},{"featureType": "landscape","elementType": "labels","stylers": [{ "visibility": "off" }]}]');
  }
);

如何将自己的样式添加到gmap [google_map_flutter插件]

1 个答案: