Flutter Google Map圆形图片Marker未居中对齐问题求助

要将当前底部对齐的用户位置Marker改为居中对齐，只需在Marker组件中添加anchor属性并设置为Offset(0.5, 0.5)即可，具体修改如下：

修改后的核心代码片段 #

markers.add(
  Marker(
    markerId: const MarkerId('myPosition'),
    position: LatLng(
      currentLocation!.latitude!,
      currentLocation!.longitude!,
    ),
    flat: true,
    icon: mylocationicon,
    // 设置Marker锚点为自身中心，实现居中对齐
    anchor: const Offset(0.5, 0.5),
    onTap: () {
      mapController.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: LatLng(
              currentLocation!.latitude!,
              currentLocation!.longitude!,
            ),
            zoom: 15,
          ),
        ),
      );
      setState(() {});
    },
  ),
);

原理说明 #

• Google Map的Marker默认锚点为Offset(0.5, 1.0)，即Marker的底部中心与地图坐标点对齐，这是当前显示为底部对齐的原因。
• 当设置anchor: Offset(0.5, 0.5)后，Marker的几何中心会与地图上的坐标点完全重合，从而实现你需要的居中对齐效果。

额外提示 #

如果你的圆形头像图片在生成BitmapDescriptor时带有额外空白边距，建议先调整图片资源或在getBytesFromAsset方法中裁剪掉多余空白，确保图片本身为正圆形且无冗余边距，这样居中后的视觉效果会更精准。

内容的提问来源于stack exchange，提问作者Coding Frontend