google-maps - Flutter - 谷歌地图 - 删除 POI 层

Question

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

Answer 1

你可以!

好吧，首先如您所知，GoogleMaps 接受主题，您可以通过此链接 (https://mapstyle.withgoogle.com) 变暗或任何您喜欢的自定义 map ，您可以获取 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- 在 Assets 文件夹中创建 mapStyle.txt，例如:



它只包含这个文本

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

2-将其添加到 pubspec.yaml Assets 例如:

  assets:
    - assets/map_style.txt

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

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