如何在Flutter应用中集成Map并获取用户放置Marker的经纬度？

核心逻辑和技术栈无关，不管是Web、移动端原生、跨端框架都遵循同一套交互流程，不需要复杂的自定义计算，直接调用地图SDK的原生API就能实现。

前置准备 #

所有端集成前先完成3项基础配置：

• 引入对应地图SDK，配置好开发密钥
• 按需申请定位权限：如果需要默认加载用户当前位置，移动端要申请精确定位权限；如果不需要默认定位，直接指定初始地图中心点即可，不用额外申请权限
• 在页面中放置地图容器，配置初始缩放等级、初始中心点坐标

核心交互逻辑 #

全程只维护一个Marker实例，不要重复创建对象，避免地图堆积无效点位：

• 全局定义一个可空的Marker变量，初始值为null，用来存当前选中的点位
• 给地图绑定点击事件，事件回调会直接返回点击位置的经纬度对象：
  • 先判断全局Marker是否已存在：存在就调用SDK的移除Marker方法删掉旧点位
  • 用点击返回的经纬度创建新Marker，添加到地图上，同时把新Marker赋值给全局变量
  • 直接从Marker的坐标属性里读取latitude（纬度）、longitude（经度）数值，同步到你的业务变量、表单字段即可
• 可选扩展：如果需要支持拖拽Marker调整位置，给Marker开启可拖拽属性，监听拖拽结束事件，拖拽完成后重新读取Marker的最新坐标更新业务值即可

主流技术栈代码参考 #

Web端（JS实现） #

// 全局存储当前选中的Marker
let activeMarker = null;

// 地图加载完成后绑定点击事件
map.on('click', (event) => {
  // 清除上一个点位
  if (activeMarker) {
    map.removeLayer(activeMarker);
  }
  // 在点击位置生成新Marker
  activeMarker = L.marker(event.latlng).addTo(map);
  // 读取经纬度
  const selectedLat = activeMarker.getLatLng().lat;
  const selectedLng = activeMarker.getLatLng().lng;
  // 写入业务逻辑，比如同步给表单、触发接口请求等
  console.log('选中点位纬度：', selectedLat, '经度：', selectedLng);
});

Flutter跨端实现 #

// 状态类中维护选中的Marker和经纬度
Marker? _selectedMarker;
double? pickedLat;
double? pickedLng;

// 地图点击处理逻辑
void _handleMapTap(LatLng tapPoint) {
  setState(() {
    // 替换旧Marker
    _selectedMarker = Marker(
      point: tapPoint,
      width: 40,
      height: 40,
      builder: (context) => const Icon(Icons.place, color: Colors.red, size: 40),
    );
    // 存经纬度
    pickedLat = tapPoint.latitude;
    pickedLng = tapPoint.longitude;
  });
}

// 地图组件配置
FlutterMap(
  options: MapOptions(
    initialCenter: const LatLng(39.9042, 116.4074),
    initialZoom: 13,
    onTap: (tapPos, latlng) => _handleMapTap(latlng),
  ),
  markers: _selectedMarker == null ? [] : [_selectedMarker!],
  // 瓦片图层配置省略
)

Android原生（Kotlin）实现 #

// Activity/Fragment中维护当前Marker
private var activeMarker: Marker? = null

// 地图就绪后绑定监听
override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap
    mMap.setOnMapClickListener { latLng ->
        // 移除旧点位
        activeMarker?.remove()
        // 添加新点位
        activeMarker = mMap.addMarker(
            MarkerOptions().position(latLng).title("已选位置")
        )
        // 读取经纬度
        val lat = activeMarker?.position?.latitude
        val lng = activeMarker?.position?.longitude
        // 业务逻辑处理
        Log.d("MapPick", "选中经纬度：$lat, $lng")
    }
}

常见踩坑说明 #

• 不要每次地图点击都新建Marker不做旧实例移除，否则地图上会残留多个无效点位，还会造成不必要的内存占用
• 注意坐标系对齐：国内场景下地图SDK默认返回的多是GCJ-02（火星坐标系），如果你的业务存储要求WGS84、BD-09等其他坐标系，要提前做好坐标转换，避免点位偏移
• 如果需要默认展示预定义的选点，页面初始化时直接走一遍添加Marker的逻辑，传入预设经纬度即可，不需要写额外的兼容代码

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari