Flutter - 谷歌地图 - 删除 POI 层

Question

在 Google Maps 网络版上有很好的记录，但我在 Flutter GM 模块中找不到相同的功能。 我需要在地图上隐藏兴趣点（商店、巴士站……） 是否有任何官方/非官方的方式来做到这一点，或者可以处理它的另一个模块？

Answer 1

你可以！

首先，您知道，GoogleMaps 接受主题，您可以通过此链接 (https://mapstyle.withgoogle.com) 获取深色或任何您喜欢的自定义地图，您可以获取 json 以插入到您的应用中。

您也可以按照本指南 (https://medium.com/@matthiasschuyten/google-maps-styling-in-flutter-5c4101806e83)。

好的，回到您的问题，在主题化时，您可以打开/关闭功能以及从那些 POI。

这样你就可以将它添加到你的 json 中，POI 就会消失

{
  "featureType": "poi",
  "stylers": [
    { "visibility": "off" }
  ]
}

如果你只想要删除 POI 的默认 googleMaps，你可以使用这个 json

 [
    {
      "featureType": "poi",
      "stylers": [
        { "visibility": "off" }
      ]
    }
  ]

另一个例子：这是我的完整设置。主题化，最后我禁用了 POI

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#523735"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c9b2a6"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#dcd2be"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#ae9e90"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#93817c"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#a5b076"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#447530"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#fdfcf8"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f8c967"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#e9bc62"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e98d58"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#db8555"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#806b63"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8f7d77"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#b9d3c2"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#92998d"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Thor Mitchell，（前任产品经理，Google Maps API）在这里说：(https://www.quora.com/How-do-I-remove-POI-from-the-Google-Maps-API)

就这些了^^

---

编辑（19 年 10 月 14 日）： 所以要更清楚。这是所有步骤。

1- 在资产文件夹 ex: 中创建 mapStyle.txt：

它只包含这段文字

[{
     "featureType": "poi",
     "stylers": [
       {
         "visibility": "off"
       }
     ]
   }]

2- 将其添加到 pubspec.yaml 资产例如：

  assets:
    - assets/map_style.txt

3- 在您的地图屏幕中执行以下操作

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  String _mapStyle;
  GoogleMapController _mapController;

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

//...

  _onMapCreated(GoogleMapController controller) {
    if (mounted)
      setState(() {
        _mapController = controller;
        controller.setMapStyle(_mapStyle);
      });
  }

//...

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: CameraPosition(
        zoom: 15,
        target: LatLng(
          _currentPosition?.latitude,
          _currentPosition?.longitude,
        ),
      ),
      onMapCreated: _onMapCreated,
      polylines: Set<Polyline>.of(_polyLines.values),
      myLocationEnabled: true,
      myLocationButtonEnabled: false,
      mapType: MapType.normal,
      compassEnabled: true,
    );
  }
}

Answer 2

您可以在您的GoogleMapController 上使用setMapStyle method：

yourMapController.setMapStyle('[{"featureType": "poi","stylers": [{"visibility": "off"}]}]');

要生成此类用于自定义地图样式的字符串，您可以使用this 网站。