Flutter使用map_location_picker插件时地图无法加载如何解决

问题描述 #

• 接入map_location_picker: ^0.0.2插件开发时，位置选择页可正常弹出，但页面内地图始终加载失败，调整初始定位坐标参数后问题没有改善。

相关实现代码 #

LocationResult result = await showLocationPicker(
  context,
  "AIzaSyAs5ElN",
  initialCenter: LatLng(_userLat, _userLong),
  myLocationButtonEnabled: true,
  layersButtonEnabled: true,
  countries: ['BF'],
  language: 'fr',
  hintText: 'Rechercher une adresse',
  requiredGPS: true,
  automaticallyAnimateToCurrentLocation: true,
  desiredAccuracy: LocationAccuracy.bestForNavigation,
  resultCardAlignment: Alignment.bottomCenter,
  // mapStylePath: 'assets/mapStyle.json',
);

异常运行表现 #

开发环境信息 #

flutter doctor检测无异常，具体配置如下：

flutter doctor
[✓] Flutter (Channel stable, 3.0.3, on macOS 12.4 21F79 darwin-x64, locale fr-BF) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.68.1) [✓] Connected device (3 available) [✓] HTTP Host Availability
• No issues found!

排查解决步骤 #

1. 校验Google Maps API Key有效性
   代码中传入的Key是截断状态，完整Google Maps API Key长度为39位，首先确认传入的是完整有效Key，同时满足三个要求：
   • 对应Google Cloud项目已开启Maps SDK for Android、Maps SDK for iOS、Geocoding API三个接口，未启用接口时地图服务会直接返回鉴权失败
   • 不要仅在Dart层传Key，安卓端必须在android/app/src/main/AndroidManifest.xml的<application>标签下添加API Key元数据，iOS端必须在ios/Runner/Info.plist中配置API Key
   • 如果Key设置了应用限制，要确认调试签名SHA1、应用包名和当前运行的应用匹配，调试阶段可以先暂时关闭Key的应用限制排除鉴权问题
2. 补全平台端必要配置
   • 安卓端：确认AndroidManifest.xml已添加网络权限<uses-permission android:name="android.permission.INTERNET" />；如果测试设备是Android 9及以上版本，在<application>标签下添加android:usesCleartextTraffic="true"，避免地图瓦片请求被系统网络安全策略拦截
   • iOS端：确认Info.plist中已添加位置使用权限描述，同时添加键值对<key>io.flutter.embedded_views_preview</key><true/>，兼容Flutter 3.x版本的平台视图渲染
3. 确认网络连通性
   测试设备必须能正常访问Google Maps服务，网络受限时地图瓦片、定位、地理编码请求都会被拦截，直接表现为空白地图，需要给测试设备配置可用的网络代理。
4. 处理插件版本兼容问题
   map_location_picker: ^0.0.2是2020年发布的旧版本，和Flutter 3.0.3版本存在平台视图渲染兼容问题，可以先将插件升级到最新发布版本，若仍有兼容问题可切换到社区维护更活跃的位置选择类插件验证。

内容的提问来源于stack exchange，提问作者BriscoPeas Aristide