实施类似交付应用程序地图设计的 Swiggy

Posted 2023-05-06

【中文标题】实施类似交付应用程序地图设计的 Swiggy

【英文标题】：Implementig Swiggy like Delivery app's map design

【发布时间】：2020-05-04 11:00:37

【问题描述】：

Swiggy 或任何其他类似On-Demand Services 的送货应用使用如下图所示的地图活动

我计划了实施- 1) 添加一个 Places AutoComplete API 片段/活动 2）使用当前位置按钮（在第二个屏幕截图中表示，因为 Google 放置自动完成 api 仅提供位置列表，但不提供当前位置选项 3）使用地图在用户选择的地方放置一个pin，使其成为一个可移动的pin，以便用户调整他/她的位置。

如果我朝着正确的方向前进，请指导我以及要遵循的资源是什么

【参考方案1】：

请尝试以下解决方案

将此添加到您的 xml 文件中

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

    <RelativeLayout
        android:layout_
        android:layout_>

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

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

            <LinearLayout
                android:gravity="center"
                android:id="@+id/locationMarkertext"
                android:layout_
                android:layout_
                android:orientation="vertical">

                <TextView
                    android:background="@drawable/rounded_corner_map"
                    android:gravity="center"
                    android:layout_
                    android:layout_
                    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_
                android:layout_
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageMarker"
                    android:layout_
                    android:layout_marginBottom="@dimen/_55sdp"
                    android:layout_
                    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();
            
        );
    

希望对你有帮助！

谢谢。