Flutter样式地图

Question

从Google Styling Wizard生成的 JSON，可以用于美化Flutter本地地图吗？

- user9678042

---

请查看此篇关于如何在Flutter上为Google地图进行样式设置的文章：https://arkapp.medium.com/flutter-and-google-map-for-beginners-part-1-fdba4ab22148 - abdul rehman

Answer 1

当前版本中没有这种能力。但是由于此 pull request的即将到来，很快就可以实现。

---

更新

最终已与#1697合并，并发布在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]，并保留当前样式不变。

样式字符串可以使用地图样式工具生成。另外，请参考iOS和Android样式参考，以了解支持的样式更多信息。

- Den

Answer 2

通过最新的Google地图更新，您可以轻松完成这个操作。

在您的onMapCreated方法中使用controller.setMapStyle代码。您可以从这里创建自己的样式。

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

- Shailandra Rajput