Implementig Swiggy like Delivery app的地图设计

Question

Swiggy或任何其他On-Demand Services类似交付应用程序使用地图活动，如下图所示

我计划实施-1）添加Places AutoComplete API片段/活动2）使用当前位置按钮（如第二幅屏幕快照所示，因为Google Places自动完成api仅提供位置列表，而不提供当前位置选项3）使用地图将图钉放在用户选择的位置，并将其变为可移动的图钉，以便用户可以调整其位置。

如果我朝正确的方向前进，请指导我，可以遵循哪些资源

Answer 1

请尝试以下解决方案

将其添加到您的xml文件中

<!--Map-->
<LinearLayout
    android:id="@+id/layoutMap"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <fragment
            android:id="@+id/map"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:name="com.google.android.gms.maps.SupportMapFragment" />

        <LinearLayout
            android:gravity="center"
            android:id="@+id/locationMarker"
            android:layout_centerVertical="true"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/_50sdp"
            android:layout_width="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:gravity="center"
                android:id="@+id/locationMarkertext"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:orientation="vertical">

                <TextView
                    android:background="@drawable/rounded_corner_map"
                    android:gravity="center"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:paddingEnd="@dimen/_10sdp"
                    android:paddingStart="@dimen/_10sdp"
                    android:text="@string/move_map_to_adjust"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_9ssp"
                    android:visibility="visible" />

            </LinearLayout>

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

                <ImageView
                    android:id="@+id/imageMarker"
                    android:layout_height="@dimen/_25sdp"
                    android:layout_marginBottom="@dimen/_55sdp"
                    android:layout_width="@dimen/_25sdp"
                    android:src="@drawable/map_pin" />

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

动画功能

private void circleAnimation() {
        GradientDrawable d = new GradientDrawable();
        d.setShape(GradientDrawable.OVAL);
        d.setSize(500, 500);
        d.setColor(0x55dddddd);
        d.setStroke(5, Color.BLACK);

        Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
                , d.getIntrinsicHeight()
                , Bitmap.Config.ARGB_8888);

        // Convert the drawable to bitmap
        Canvas canvas = new Canvas(bitmap);
        d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        d.draw(canvas);

        // Radius of the circle
        final int radius = 20;

        // Add the circle to the map
        final GroundOverlay circle = mMap.addGroundOverlay(new GroundOverlayOptions()
                .position(mMap.getCameraPosition().target, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setIntValues(0, radius);
        valueAnimator.setDuration(2000);
        valueAnimator.setEvaluator(new IntEvaluator());
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float animatedFraction = valueAnimator.getAnimatedFraction();
                circle.setDimensions(animatedFraction * radius * 2);
            }
        });

        valueAnimator.start();
    }

将此代码添加到您的onMapReady

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

        mMap.setOnCameraMoveListener(new GoogleMap.OnCameraMoveListener() {
            @Override
            public void onCameraMove() {
                mMap.clear();
            }
        });

        mMap.setOnCameraIdleListener(new GoogleMap.OnCameraIdleListener() {
            @Override
            public void onCameraIdle() {
                latLng = mMap.getCameraPosition().target;
                currLat = latLng.latitude;
                currLong = latLng.longitude;
                Log.e(TAG, "currLat: " + currLat);
                Log.e(TAG, "currLong: " + currLong);
                mMap.clear();
                circleAnimation();
            }
        });
    }

我希望这可以帮助您！

谢谢。