为Flutter应用的Mapbox添加可拖拽标记（mapbox_maps_flutter:0.4.4）

一、实现「随相机中心点移动的标记」 #

可以通过Stack叠加Widget快速实现，标记视觉上固定在地图屏幕中心，随相机中心点同步更新地理坐标：

修改后的完整代码 #

MapboxMap? mapboxMap;
// 存储当前相机中心点的地理坐标
Position? _cameraCenterPosition;

_onMapCreated(MapboxMap mapboxMap) async {
  this.mapboxMap = mapboxMap;
  // 初始化地图组件设置
  await mapboxMap.location.updateSettings(LocationComponentSettings(enabled: true));
  await mapboxMap.scaleBar.updateSettings(ScaleBarSettings(enabled: false));
  await mapboxMap.compass.updateSettings(CompassSettings(enabled: false));

  // 初始化中心点为用户当前位置
  final location = await mapboxMap.location.getLastKnownLocation();
  if (location != null) {
    setState(() {
      _cameraCenterPosition = Position(location.longitude, location.latitude);
    });
  }

  // 监听相机移动，实时更新中心点坐标
  mapboxMap.onCameraChanged.listen((event) {
    final center = event.cameraState.center;
    setState(() {
      _cameraCenterPosition = Position(center!.coordinates[0], center.coordinates[1]);
    });
  });
}

Widget _map() {
  return SizedBox(
    height: MediaQuery.of(context).size.height * 0.8,
    child: Stack(
      alignment: Alignment.center,
      children: [
        MapWidget(
          resourceOptions: ResourceOptions(accessToken: MAPBOX_ACCESS_TOKEN),
          onMapCreated: _onMapCreated,
          key: const ValueKey("mapWidget"),
          cameraOptions: CameraOptions(
            center: Point(
              coordinates: Position(
                widget.location.longitude,
                widget.location.latitude,
              )).toJson(),
            zoom: 17.5,
          ),
        ),
        // 自定义标记，始终固定在屏幕中心
        if (_cameraCenterPosition != null)
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.white, width: 2),
            ),
            child: const Icon(Icons.location_pin, color: Colors.white, size: 20),
          ),
      ],
    ),
  );
}

说明 #

• 利用Stack的居中对齐，让标记始终显示在地图屏幕中心，地图拖动时视觉位置不变
• 通过onCameraChanged监听相机状态，实时获取当前中心点的地理坐标，可用于后续业务逻辑（如提交选中位置）

二、实现「类似Uber的可拖拽标记」 #

通过SymbolManager添加支持拖拽的标记，监听拖拽事件获取最终位置：

完整实现代码 #

MapboxMap? mapboxMap;
SymbolManager? _symbolManager;
Symbol? _draggableMarker;

_onMapCreated(MapboxMap mapboxMap) async {
  this.mapboxMap = mapboxMap;
  // 初始化地图组件设置
  await mapboxMap.location.updateSettings(LocationComponentSettings(enabled: true));
  await mapboxMap.scaleBar.updateSettings(ScaleBarSettings(enabled: false));
  await mapboxMap.compass.updateSettings(CompassSettings(enabled: false));

  // 加载地图样式并初始化SymbolManager
  final style = await mapboxMap.style.loadStyleURI(StyleURI.STREETS);
  _symbolManager = SymbolManager(
    mapboxMap,
    style,
    iconAllowOverlap: true,
    iconIgnorePlacement: true,
  );

  // 导入自定义标记图标到地图样式
  await mapboxMap.style.addImage(
    "custom-marker",
    await rootBundle.load("assets/marker_icon.png"), // 替换为你的本地图标路径
    true,
  );

  // 添加初始标记到用户当前位置
  final location = await mapboxMap.location.getLastKnownLocation();
  if (location != null) {
    _draggableMarker = await _symbolManager?.createSymbol(
      SymbolOptions(
        geometry: Point(
          coordinates: Position(location.longitude, location.latitude),
        ).toJson(),
        iconImage: "custom-marker",
        iconSize: 1.5,
        draggable: true, // 开启拖拽功能
      ),
    );
  }

  // 监听标记拖拽结束事件
  _symbolManager?.onSymbolDragEnd.listen((event) {
    final newCoords = event.symbol.geometry!["coordinates"];
    // 拖拽完成后的位置：纬度newCoords[1]，经度newCoords[0]
    print("拖拽后位置：${newCoords[1]}, ${newCoords[0]}");
    // 这里添加业务逻辑处理
  });
}

// 组件销毁时释放资源
@override
void dispose() {
  _symbolManager?.dispose();
  super.dispose();
}

Widget _map() {
  return SizedBox(
    height: MediaQuery.of(context).size.height * 0.8,
    child: MapWidget(
      resourceOptions: ResourceOptions(accessToken: MAPBOX_ACCESS_TOKEN),
      onMapCreated: _onMapCreated,
      key: const ValueKey("mapWidget"),
      cameraOptions: CameraOptions(
        center: Point(
          coordinates: Position(
            widget.location.longitude,
            widget.location.latitude,
          )).toJson(),
        zoom: 17.5,
      ),
    ),
  );
}

版本兼容与替代文档方案 #

由于mapbox_maps_flutter 0.4.4无官方Flutter文档，可通过以下方式获取参考：

• 查看包内的example目录：包含标记、图层、相机操作等基础示例
• 对应版本的Android/iOS原生API文档：Flutter包的API基本映射原生接口，可通过原生文档推导用法
• 包的GitHub仓库issues和discussions：搜索其他开发者的同类问题及解决方案

内容的提问来源于stack exchange，提问作者Duck Dodgers