Flutter如何通过高德地图实现经纬度定位展示

在Flutter项目中，我想通过高德地图SDK实现经纬度定位并在地图上展示当前位置，但不太清楚具体步骤。目前已经集成了高德地图插件，但不知道如何获取设备的经纬度坐标，以及如何将这些坐标实时显示在地图上。是否需要额外配置定位权限？能否提供一个完整的代码示例，包括权限请求、定位获取和地图标注的完整流程？

2 回复

使用高德地图Flutter插件amap_flutter_map和amap_flutter_location。先配置Android和iOS的API密钥，然后初始化定位并获取经纬度，最后用AMapWidget展示地图和标记位置。

更多关于Flutter如何通过高德地图实现经纬度定位展示的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中通过高德地图实现经纬度定位展示，可以使用高德官方提供的amap_flutter_location和amap_flutter_map插件。以下是实现步骤：

1. 添加依赖

在pubspec.yaml中添加：

dependencies:
  amap_flutter_location: ^2.0.0  # 定位插件
  amap_flutter_map: ^2.0.0       # 地图插件
  permission_handler: ^11.0.0    # 权限处理

2. 配置权限

Android配置：

  • 在AndroidManifest.xml中添加权限和Key：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application>
    <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="您的高德Key"/>
</application>

iOS配置：

  • 在Info.plist中添加：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>

3. 核心代码实现

import 'package:amap_flutter_location/amap_flutter_location.dart';
import 'package:amap_flutter_location/amap_flutter_location_options.dart';
import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:permission_handler/permission_handler.dart';

class LocationMap extends StatefulWidget {
  @override
  _LocationMapState createState() => _LocationMapState();
}

class _LocationMapState extends State<LocationMap> {
  final AMapFlutterLocation _locationPlugin = AMapFlutterLocation();
  LatLng? _currentLocation;
  
  @override
  void initState() {
    super.initState();
    _requestPermission();
    _startLocation();
  }

  // 请求定位权限
  void _requestPermission() async {
    await Permission.locationWhenInUse.request();
  }

  // 开始定位
  void _startLocation() {
    _locationPlugin.setLocationOption(AMapFlutterLocationOption(
      needAddress: false, // 不需要地址信息
      geoLanguage: GeoLanguage.ZH // 中文
    ));

    _locationPlugin.onLocationChanged.listen((AMapLocation location) {
      setState(() {
        _currentLocation = LatLng(location.latitude!, location.longitude!);
      });
    });

    _locationPlugin.startLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _currentLocation == null 
          ? Center(child: CircularProgressIndicator())
          : AMapWidget(
              apiKey: '您的高德Key',
              initialCameraPosition: CameraPosition(
                target: _currentLocation!,
                zoom: 15,
              ),
              markers: {
                Marker(
                  position: _currentLocation!,
                  icon: BitmapDescriptor.defaultMarker,
                )
              },
            ),
    );
  }

  @override
  void dispose() {
    _locationPlugin.stopLocation();
    super.dispose();
  }
}

4. 关键说明

  • 获取高德Key：需在高德开放平台注册应用
  • 定位精度：通过AMapFlutterLocationOption可配置定位参数
  • 标记显示：使用Marker在地图上显示当前位置
  • 权限处理：iOS还需在Podfile中添加amap_flutter_location配置

注意事项

  • 确保在真机上测试定位功能
  • iOS需要设置NSLocationWhenInUseUsageDescription
  • 安卓需要保证签名SHA1配置正确

这样就实现了在Flutter中通过高德地图获取并展示当前经纬度位置的功能。

回到顶部