颤振风格的地图答案

【问题标题】：Flutter styled map颤振风格的地图
【发布时间】：2018-10-01 21:29:24
【问题描述】：

是否可以使用Google Styling Wizard生成的json 风格化 Flutter 原生地图？

【问题讨论】：

标签： google-maps flutter

【解决方案1】：

当前版本没有这种能力。但是由于this pull request，很快就可以实现

更新

终于和#1697 pull request 合并了！并且在 google_maps_flutter 0.5.16 版本中发布。

如何

要使用此功能，请在 GoogleMapController 实例上调用 setMapStyle 并将样式字符串作为参数传递。

例如

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

来自文档：

设置基本地图的样式。

设置为 null 以清除任何以前的自定义样式。

如果检测到 [mapStyle] 存在问题，包括无法解析样式化 JSON、无法识别的特征类型、无法识别的元素类型，或无效的样式器键：[MapStyleException] 被抛出并且当前样式保持不变。

可以使用map style tool 生成样式字符串。另外，参考 iOS 和 Android 样式参考以获取有关支持的样式。

【讨论】：

【解决方案2】：

使用最新更新的谷歌地图，您可以轻松做到这一点。

在您的 onMapCreated 方法上使用 controller.setMapStyle 使用此代码。您可以通过here 创建自己的风格。

void onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
    controller.setMapStyle('''
    [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]
    ''');
   
  }

【讨论】：