如何在Fragment的ConstraintLayout中嵌入Google Map(SupportMapFragment)

你当前布局里使用FragmentContainerView承载SupportMapFragment的方向是对的，这也是官方推荐的方案，但你的布局存在无效约束引用（未定义的guideline2），这是导致设计/蓝图视图异常的核心原因。以下是完整的修正和实现方案：

一、修正布局文件 #

将无效的约束替换为与现有控件的关联，同时保留FragmentContainerView的正确配置，优化预览属性让设计视图正常显示：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    tools:context=".fragments.CountryDetailsFragment">

    <TextView
        android:id="@+id/tv_country_details_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="Country Details"
        android:textSize="22sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_country_name_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Name:"
        android:textSize="18sp"
        app:layout_constraintEnd_toStartOf="@+id/tv_country_name"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_country_details_label" />

    <TextView
        android:id="@+id/tv_country_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name goes here"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tv_country_name_label"
        app:layout_constraintTop_toTopOf="@+id/tv_country_name_label" />

    <!-- 正确配置的SupportMapFragment容器 -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:layout_marginTop="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_country_name"
        tools:layout="@layout/map_preview" />
</androidx.constraintlayout.widget.ConstraintLayout>

可选：添加自定义预览布局 #

创建res/layout/map_preview.xml，让设计视图显示更直观的地图占位：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e0e0e0">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Map Preview"
        android:textSize="16sp" />
</FrameLayout>

二、在Fragment代码中初始化地图 #

在CountryDetailsFragment中获取地图实例并配置：

class CountryDetailsFragment : Fragment() {
    private var googleMap: GoogleMap? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // 获取SupportMapFragment实例
        val mapFragment = childFragmentManager.findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync { map ->
            googleMap = map
            // 这里可以配置地图，比如设置初始位置、添加标记等
            val initialLocation = LatLng(-34.0, 151.0)
            googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(initialLocation, 10f))
        }
    }
}

关键说明 #

• FragmentContainerView是官方标准：Android Studio提示替换<fragment>标签是正确的，它解决了旧标签的生命周期、状态恢复等问题，是嵌套Fragment的最优容器。
• 修复无效约束：原布局中引用的guideline2未定义，会导致布局解析失败，替换为与tv_country_name的关联约束即可恢复设计视图。
• tools:layout的作用：该属性仅在设计阶段生效，用于显示占位内容，避免蓝图视图消失，也可以直接使用系统布局（如@android:layout/simple_list_item_1）替代自定义预览。

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