Mapbox Flutter:初始相机位置显示不正确的位置

Posted

技术标签:

【中文标题】Mapbox Flutter:初始相机位置显示不正确的位置【英文标题】:Mapbox Flutter: Initial Camera Position Shows Incorrect Location 【发布时间】:2020-09-23 17:51:45 【问题描述】:

我正在使用mapbox_gl,这是一个用于访问 Mapbox 服务的 Flutter 插件。应用程序需要显示从通过geolocator 插件获取的用户当前位置馈送的初始相机位置。在android模拟器上,将当前位置设置为斯洛文尼亚卢布尔雅那的坐标(北纬46度,东经13度左右)会显示刚果***的地图,这显然是不正确的。

MapboxMap 小部件按以下方式构建:

class HomeScreen extends StatelessWidget 
  final String mapboxToken = 'XXX-TOKEN-XXX';

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: FutureBuilder(
        future: _acquireCurrentPosition(),
        builder: (BuildContext context, AsyncSnapshot snapshot) =>
            snapshot.hasData
                ? MapboxMap(
                    accessToken: mapboxToken,
                    minMaxZoomPreference: MinMaxZoomPreference(6.0, 15.0),
                    compassEnabled: false,
                    initialCameraPosition: CameraPosition(
                      target: snapshot.data,
                    ),
                  )
                : Center(
                    child: CircularProgressIndicator(),
                  ),
      ),
    );
  
  
  Future<LatLng> _acquireCurrentPosition() async 
    Position position = await getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    return LatLng(position.latitude, position.longitude);
  

方法_acquireCurrentPosition()正确获取经纬度组合,并在安卓模拟器、ios模拟器甚至安卓实体设备(小米红米Note 8 Pro)上进行了测试。即使使用不同的位置,初始相机位置的错误仍然存​​在。

非常感谢任何形式的帮助。

【问题讨论】:

【参考方案1】:

经过一些变通方法后,我设法通过以下步骤确定并解决了问题:

首先,删除 geolocator 包并将其替换为 location 包,并通过在 AndroidManifest.xml 中提及它们明确声明 Android 和 iOS 上的位置权限

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Info.plist分别

<key>NSLocationWhenInUseUsageDescription</key>
<string>Shows your location on the map and helps improve the map</string>

接下来,您可以使用onMapCreated 回调,而不是通过initialCameraPosition 参数设置初始相机位置:

// This is how you'd build the MapboxMap widget
MapboxMap(
  accessToken: mapboxToken,
  onMapCreated: (controller) 
    _acquireCurrentLocation().then((LatLong location) 
      if (location != null) 
        controller.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              target: location,
            ),
          ),
        );
      
    ).catchError((error) => print(error));
  ,
  minMaxZoomPreference: MinMaxZoomPreference(6.0, 15.0),
  initialCameraPosition: CameraPosition(
    target: LatLng(45.45, 45.45),
  ),
);

// Method that uses location plugin
Future<LatLng> _acquireCurrentLocation() async 
  Location location = new Location();

  bool serviceEnabled;
  PermissionStatus permissionGranted;
  LocationData locationData;

  serviceEnabled = await location.serviceEnabled();
    if (!serviceEnabled) 
      serviceEnabled = await location.requestService();
      if (!serviceEnabled) 
        return null;
      
    

  permissionGranted = await location.hasPermission();
  if (permissionGranted == PermissionStatus.denied) 
    permissionGranted = await location.requestPermission();
    if (permissionGranted != PermissionStatus.granted) 
      return null;
    
  

  locationData = await location.getLocation();
  return LatLng(locationData.latitude, locationData.longitude);

我个人的建议是将 Android 的最低 SDK 版本更改为 23。

【讨论】:

以上是关于Mapbox Flutter:初始相机位置显示不正确的位置的主要内容,如果未能解决你的问题,请参考以下文章

用mapbox插件在flutter地图上添加自定义标记。

如何更改/偏移Mapbox GL JS中的摄像机中心点?

在地图 Mapbox JS 上显示用户位置

Flutter 中的 Google Maps 相机位置更新问题

创建自定义地图叠加层(折线)[Mapbox]

在 Mapbox 上添加模糊效果