Android：GoogleMaps 標記詳細信息片段

Question

我是 Android 的初學者，我正在嘗試實現類似於 Google Maps App 的功能。 當我按下標記時，我希望在SupportMapFragment頂部出現一個帶有詳細信息的新片段，如下所示：

我怎樣才能做到這一點？

這是該片段的默認布局嗎？

這甚至是一個片段還是只是一個修改過的信息 window？

Answer 1

是的，您可以使用這個庫輕松實現它，它在最小化和拉伸時支持 2 種布局，我在谷歌地圖應用程序之后實現了類似的行為，獲取如下數據並將其設置在布局中

這是鏈接

樣本用法是

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="16sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:text="The Awesome Sliding Up Panel"
        android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Answer 2

我想到了。 我需要的是一個底頁對話框。 這是我用作靈感來源的非常有用的指南。

步驟1

在 `app.gradle` 中實現材質組件庫：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="bottom">
   
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Rent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

第2步

在 res->layout 中創建您選擇的布局。 我的看起來像這樣：

 @Override
   public boolean onMarkerClick(Marker marker) {
      showBottomSheetDialog();
      return false;
   } 

布局與底部對齊。

第 3 步

定義一個實例化 BottomSheetDialog 的方法：

 private void showBottomSheetDialog() { final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(getContext()); bottomSheetDialog.setContentView(R.layout.MY_LAYOUT_NAME); AppCompatButton btn = bottomSheetDialog.findViewById(R.id.btn_view); bottomSheetDialog.show(); }

第4步

這一步是額外的，如果您想查看如何通過按下 GoogleMap 標記來調用 BottomSheetDialog。

確保處理 MapSupportFragment 的 class 實現OnMapReadyCallback 、 GoogleMap.OnMarkerClickListener和（如果需要標記集群） ClusterManager.OnClusterItemClickListener 。 覆蓋必要的方法：

 @Override public boolean onMarkerClick(Marker marker) { showBottomSheetDialog(); return false; }

如果您需要集群，請不要忘記在 @onMapReady() 中添加：

 map.setOnCameraIdleListener(clusterManager); map.setOnMarkerClickListener(clusterManager); clusterManager.setOnClusterItemClickListener(this);

瞧！