Flutter开发：如何在Google Map放置标记并定位至该标记获取用户目标位置

核心逻辑 #

和外卖、网约车的选点逻辑一致：把Marker固定在屏幕正中间，用户拖动地图调整位置，地图停止移动后，获取当前地图中心的经纬度，就是用户指定的目标位置。

步骤实现 #

1. 添加依赖与权限配置

• 在pubspec.yaml中添加Google Maps依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # 请使用最新版本

• 配置权限：
  • Android：在android/app/src/main/AndroidManifest.xml中添加

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

  • iOS：在ios/Runner/Info.plist中添加

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>需要获取位置信息来选择目标地点</string>
    

2. 实现UI与核心功能

用Stack布局将Marker固定在屏幕中心，下方是GoogleMap组件，通过地图控制器和相机监听获取坐标：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapPickerScreen extends StatefulWidget {
  const MapPickerScreen({super.key});

  @override
  State<MapPickerScreen> createState() => _MapPickerScreenState();
}

class _MapPickerScreenState extends State<MapPickerScreen> {
  late GoogleMapController _mapController;
  LatLng? _selectedLocation;
  final CameraPosition _initialCameraPosition = const CameraPosition(
    target: LatLng(31.2304, 121.4737), // 默认初始位置（上海）
    zoom: 16,
  );

  // 地图控制器初始化
  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
  }

  // 地图停止移动时，获取中心坐标
  void _onCameraIdle() async {
    final center = await _mapController.getCameraPosition();
    setState(() {
      _selectedLocation = center.target;
    });
    // 这里可以调用地理编码API，把经纬度转成具体地址
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择目标位置')),
      body: Stack(
        alignment: Alignment.center,
        children: [
          GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: _initialCameraPosition,
            onCameraIdle: _onCameraIdle,
            myLocationEnabled: true, // 显示当前位置按钮
          ),
          // 固定在屏幕中心的Marker图标
          const Icon(
            Icons.location_on,
            color: Colors.red,
            size: 40,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_selectedLocation != null) {
            // 这里可以把选中的坐标返回给上一页或者保存
            print('选中位置：${_selectedLocation!.latitude}, ${_selectedLocation!.longitude}');
            Navigator.pop(context, _selectedLocation);
          }
        },
        child: const Icon(Icons.check),
      ),
    );
  }
}

3. 额外优化点

• 地理编码转换：调用Google Maps的Geocoding API，将经纬度转换为街道地址，需要在Google Cloud控制台启用Geocoding API并配置API密钥。
• 自定义Marker样式：替换默认的Icon为自定义图片，比如用Image.asset或者NetworkImage来实现更贴合APP风格的Marker。
• 边界限制：如果需要限制用户只能在特定区域选点，可以通过GoogleMap的cameraTargetBounds参数设置。

内容的提问来源于stack exchange，提问作者نعمان منذر محمود الجميلي