首页 > 解决方案 > 谷歌地图上的优步风格信息窗口

问题描述

我想展示可以一直打开的 Uber 类型信息窗口,并且可以在相机视图更新时移动并适合屏幕,而不是剪切或重叠问题。

我想要的是 :

在此处输入图像描述

我尝试过的:

implementation 'com.google.maps.android:android-maps-utils:0.4+'

custom_marker_infowindow_right.xml

<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ll_marker_right"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_marker_right"
            android:layout_width="@dimen/markerSize"
            android:layout_height="@dimen/markerSize"
            android:layout_gravity="center_vertical"
            android:contentDescription="@string/app_name"
            android:src="@drawable/destination_location" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="center_vertical"
                android:contentDescription="@string/app_name"
                android:src="@drawable/marker_car"
                android:visibility="gone" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/layout_shadow"
                android:elevation="10dp"
                android:orientation="horizontal"
                android:weightSum="1">

                <TextView
                    android:id="@+id/tv_timing_right"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.4"
                    android:background="@drawable/marker_square_hours"
                    android:fontFamily="@font/montserrat_light"
                    android:gravity="center_vertical|center"
                    android:maxLines="4"
                    android:padding="5dp"
                    android:textColor="@color/color_FFFFFF"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_address_right"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.6"
                    android:background="@drawable/marker_square_address"
                    android:fontFamily="@font/montserrat_light"
                    android:gravity="center_vertical"
                    android:maxLines="4"
                    android:padding="5dp"
                    android:textColor="@color/color_000000"
                    android:textSize="12sp" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

MainActivity.java

IconGenerator iconFactory_right = new IconGenerator(mContext);
iconFactory_right.setBackground(null);

View view_right = View.inflate(activity, R.layout.custom_marker_infowindow_right, null);
iconFactory_right.setContentView(view_right);

LinearLayout ll_marker_right = (LinearLayout) view_right.findViewById(R.id.ll_marker_right);
int width_ll_right = ll_marker_right.getLayoutParams().width;
ll_marker_right.setPadding((width_ll_right / 2) - (iv_marker_right.getLayoutParams().width / 2), 0, 0, 0);

mMap.addMarker(markerOptions.position(destinationLocation).anchor(0.5f, 0.5f).icon(BitmapDescriptorFactory.fromBitmap(iconFactory_right.makeIcon("current"))));

我得到什么:

在此处输入图像描述

正如我们所看到的,我没有得到完整的标记并且标记被切割,并且在某些情况下它在两个之间重叠。我也尝试mMap.animateCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), 450));添加填充,但在每种情况下它都无法正常工作。所以我想实现 Uber 类型的信息窗口,它可以在相机视图更新时移动并适合屏幕。

任何帮助将不胜感激..!! 提前致谢。

标签: androidgoogle-mapsgoogle-maps-markers

解决方案


推荐阅读