如何利用Google Map API的OnMarkerClickListener实现底部弹窗Fragment？

嘿，我来帮你实现这个需求！要达到像原生谷歌地图那样点击Marker后在屏幕底部弹出Fragment的效果，咱们可以借助BottomSheetDialogFragment来实现，同时正确使用OnMarkerClickListener接口。先看看你的现有代码需要调整的地方，再一步步实现：

第一步：修正代码结构 #

你的现有代码里onMarkerClick方法嵌套在了onMapReady里面，这是语法错误，得把它移到类的外部，同时确保你的Activity/Fragment实现了GoogleMap.OnMarkerClickListener接口。

第二步：创建底部弹窗Fragment（BottomSheetDialogFragment） #

原生谷歌地图的底部弹窗就是典型的BottomSheet效果，我们先创建一个自定义的BottomSheetFragment来展示Marker的详情：

1. 自定义BottomSheetDialogFragment类 #

public class MarkerDetailBottomSheet extends BottomSheetDialogFragment {
    // 定义传递数据的key
    private static final String ARG_TITLE = "marker_title";
    private static final String ARG_SNIPPET = "marker_snippet";
    private static final String ARG_POSITION = "marker_position";

    // 静态方法，用于创建Fragment实例并传递参数
    public static MarkerDetailBottomSheet newInstance(String title, String snippet, LatLng position) {
        MarkerDetailBottomSheet fragment = new MarkerDetailBottomSheet();
        Bundle args = new Bundle();
        args.putString(ARG_TITLE, title);
        args.putString(ARG_SNIPPET, snippet);
        args.putParcelable(ARG_POSITION, position);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // 加载弹窗布局
        View view = inflater.inflate(R.layout.bottom_sheet_marker_detail, container, false);

        // 获取传递过来的Marker数据
        Bundle args = getArguments();
        if (args != null) {
            String title = args.getString(ARG_TITLE);
            String snippet = args.getString(ARG_SNIPPET);
            LatLng position = args.getParcelable(ARG_POSITION);

            // 绑定UI控件并设置数据
            TextView titleTv = view.findViewById(R.id.tv_marker_title);
            TextView snippetTv = view.findViewById(R.id.tv_marker_snippet);
            TextView positionTv = view.findViewById(R.id.tv_marker_position);

            titleTv.setText(title);
            snippetTv.setText(snippet);
            positionTv.setText(String.format("坐标: %.2f, %.2f", position.latitude, position.longitude));
        }

        return view;
    }
}

2. 弹窗布局文件（bottom_sheet_marker_detail.xml） #

创建对应的布局文件，用来展示Marker的信息：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/tv_marker_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"/>

    <TextView
        android:id="@+id/tv_marker_snippet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginTop="8dp"
        android:textColor="@android:color/darker_gray"/>

    <TextView
        android:id="@+id/tv_marker_position"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:layout_marginTop="8dp"
        android:textColor="@android:color/darker_gray"/>

</LinearLayout>

第三步：修改你的Map Activity代码 #

现在调整你的主Activity代码，实现OnMarkerClickListener并在点击时弹出BottomSheet：

public class YourMapActivity extends AppCompatActivity implements GoogleMap.OnMarkerClickListener {
    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map);

        // 初始化MapFragment
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        if (mapFragment != null) {
            mapFragment.getMapAsync(this);
        }
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // 初始化首尔位置的Marker
        LatLng seoul = new LatLng(37.56, 126.97);
        MarkerOptions makerOptions = new MarkerOptions();
        makerOptions.position(seoul)
                .title("서울")
                .snippet("포토존")
                .icon(BitmapDescriptorFactory.fromResource(R.drawable.point));

        // 添加Marker到地图
        mMap.addMarker(makerOptions);
        // 移动相机到初始位置并缩放
        mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
        mMap.animateCamera(CameraUpdateFactory.zoomTo(10));

        // 设置Marker点击监听器
        mMap.setOnMarkerClickListener(this);
    }

    @Override
    public boolean onMarkerClick(Marker marker) {
        // 获取当前点击Marker的信息
        String markerTitle = marker.getTitle();
        String markerSnippet = marker.getSnippet();
        LatLng markerPosition = marker.getPosition();

        // 创建并显示底部弹窗Fragment
        MarkerDetailBottomSheet bottomSheet = MarkerDetailBottomSheet.newInstance(markerTitle, markerSnippet, markerPosition);
        bottomSheet.show(getSupportFragmentManager(), "MarkerBottomSheet");

        // 返回true表示我们自己处理了点击事件，不再触发谷歌地图默认的InfoWindow
        return true;
    }
}

关键注意点 #

• 确保你的项目依赖了Material Design库，在build.gradle(Module level)里添加：

  implementation 'com.google.android.material:material:1.9.0' // 版本可根据需求调整
  

• onMarkerClick返回true是为了屏蔽谷歌地图默认的InfoWindow显示，因为我们要展示自定义的底部弹窗
• 通过Bundle传递Marker数据可以让同一个BottomSheetFragment适配不同Marker的信息

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