新增地图细节

app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <application
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"

app/src/main/java/com/aiosman/riderpro/Street.kt

@@ -1,30 +1,124 @@
 package com.aiosman.riderpro
 
+import android.content.pm.PackageManager
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.core.content.ContextCompat
+import com.google.android.gms.location.FusedLocationProviderClient
+import com.google.android.gms.location.LocationServices
 import com.google.android.gms.maps.model.CameraPosition
 import com.google.android.gms.maps.model.LatLng
 import com.google.maps.android.compose.GoogleMap
+import com.google.maps.android.compose.MapProperties
+import com.google.maps.android.compose.MapUiSettings
 import com.google.maps.android.compose.MarkerComposable
 import com.google.maps.android.compose.MarkerState
 import com.google.maps.android.compose.rememberCameraPositionState
 
 @Composable
-fun StreetPage(){
+fun StreetPage() {
     val navController = LocalNavController.current
-    val cameraPositionState = rememberCameraPositionState {
+    val context = LocalContext.current
-        position = CameraPosition.fromLatLngZoom(
+    val fusedLocationClient: FusedLocationProviderClient =
-            LatLng(countries[1].lat, countries[1].lng),
+        LocationServices.getFusedLocationProviderClient(context)
-            4f)
+    var currentLocation by remember { mutableStateOf<LatLng?>(null) }
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
     }
+    val cameraPositionState = rememberCameraPositionState {
+        position = CameraPosition.fromLatLngZoom(currentLocation ?: LatLng(0.0, 0.0), 10f)
+    }
+    var hasLocationPermission by remember { mutableStateOf(false) }
+    var searchText by remember { mutableStateOf("") }
+    val permissionLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.RequestPermission(),
+        onResult = { isGranted ->
+            hasLocationPermission = isGranted
+            if (isGranted) {
+                fusedLocationClient.lastLocation.addOnSuccessListener { location ->
+                    if (location != null) {
+                        currentLocation = LatLng(location.latitude, location.longitude)
+                    }
+                }
+            }
+        }
+    )
+    LaunchedEffect(Unit) {
+        when (PackageManager.PERMISSION_GRANTED) {
+            ContextCompat.checkSelfPermission(
+                context,
+                android.Manifest.permission.ACCESS_FINE_LOCATION
+            ) -> {
+                fusedLocationClient.lastLocation.addOnSuccessListener { location ->
+                    if (location != null) {
+                        currentLocation = LatLng(location.latitude, location.longitude)
+                    }
+                }
+                hasLocationPermission = true
+            }
+
+            else -> {
+                permissionLauncher.launch(android.Manifest.permission.ACCESS_FINE_LOCATION)
+            }
+        }
+    }
+    LaunchedEffect(currentLocation) {
+        cameraPositionState.position =
+            CameraPosition.fromLatLngZoom(currentLocation ?: LatLng(0.0, 0.0), 10f)
+    }
+    Box(
+        modifier = Modifier.fillMaxSize().padding(bottom = 56.dp + navigationBarHeight)
+    ) {
         GoogleMap(
             modifier = Modifier.fillMaxSize(),
-        cameraPositionState = cameraPositionState
+            cameraPositionState = cameraPositionState,
+            properties = MapProperties(
+                isMyLocationEnabled = hasLocationPermission,
+            ),
+            uiSettings = MapUiSettings(
+                compassEnabled = true,
+                myLocationButtonEnabled = false,
+                zoomControlsEnabled = false
+            )
         ) {
+
             countries.forEach { position ->
                 MarkerComposable(
                     state = MarkerState(position = LatLng(position.lat, position.lng)),
@@ -39,6 +133,105 @@ fun StreetPage(){
                     )
                 }
             }
+
+
+
+        }
+        Image(
+            painter = painterResource(id = R.drawable.rider_pro_my_location),
+            contentDescription = "",
+            modifier = Modifier
+                .align(Alignment.BottomStart)
+                .padding(start = 16.dp, bottom = 16.dp + navigationBarHeight) .clickable {
+                    currentLocation?.let {
+                        cameraPositionState.position = CameraPosition.fromLatLngZoom(it, cameraPositionState.position.zoom)
+                    }
+                }
+        )
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(end = 16.dp, bottom = 16.dp + navigationBarHeight)
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(CircleShape)
+                    .background(color = Color(0xffda3832))
+
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.rider_pro_new_post_add_pic),
+                    contentDescription = "",
+                    modifier = Modifier
+                        .align(Alignment.Center).size(36.dp),
+                    colorFilter = ColorFilter.tint(Color.White)
+
+                )
+            }
         }
 
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.TopCenter)
+                .padding(top = 64.dp, start = 16.dp,end=16.dp)
+        ) {
+            Box(
+                modifier = Modifier.background(Color.White).padding(16.dp),
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clip(RoundedCornerShape(16.dp))
+                        .background(Color(0xfff7f7f7))
+                        .padding(vertical = 8.dp, horizontal = 16.dp)
+                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.rider_pro_search_location),
+                            contentDescription = "",
+                            tint = Color(0xffc6c6c6),
+                            modifier = Modifier.size(24.dp)
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                        ) {
+                            if (searchText.isEmpty()){
+                                Text(
+                                    text = "Please enter a search location",
+                                    color = Color(0xffc6c6c6),
+                                    fontSize = 16.sp,
+                                    modifier = Modifier.padding(start = 8.dp)
+                                )
+                            }
+
+                            BasicTextField(
+                                value = searchText,
+                                onValueChange = {
+                                    searchText = it
+                                },
+                                modifier = Modifier
+                                    .fillMaxWidth(),
+                                textStyle = TextStyle(
+                                    fontSize = 16.sp,
+                                    fontWeight = FontWeight.Normal
+                                )
+                            )
+                        }
+
+                    }
+
+                }
+            }
+        }
+
+    }
+
+
 }

app/src/main/res/drawable/rider_pro_my_location.xml

@@ -0,0 +1,21 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="48dp" android:viewportHeight="48" android:viewportWidth="48" android:width="48dp">
+      
+    <path android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M24,24m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0" android:strokeColor="#00000000" android:strokeWidth="1"/>
+      
+    <group>
+            
+        <clip-path android:pathData="M24,24m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0"/>
+            
+        <path android:fillColor="#FFFFFF" android:fillType="nonZero" android:pathData="M37.004,22.545C36.335,16.48 31.52,11.665 25.455,10.996L25.455,8L22.545,8L22.545,10.996C16.48,11.665 11.665,16.48 10.996,22.545L8,22.545L8,25.455L10.996,25.455C11.665,31.52 16.48,36.335 22.545,37.004L22.545,40L25.455,40L25.455,37.004C31.52,36.335 36.335,31.52 37.004,25.455L40,25.455L40,22.545L37.004,22.545ZM24,34.182C18.378,34.182 13.818,29.622 13.818,24C13.818,18.378 18.378,13.818 24,13.818C29.622,13.818 34.182,18.378 34.182,24C34.182,29.622 29.622,34.182 24,34.182Z" android:strokeColor="#00000000" android:strokeWidth="1"/>
+          
+    </group>
+      
+    <group>
+            
+        <clip-path android:pathData="M24,24m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0"/>
+            
+        <path android:fillColor="#FFFFFF" android:fillType="nonZero" android:pathData="M24,24m-4,0a4,4 0,1 1,8 0a4,4 0,1 1,-8 0" android:strokeColor="#00000000" android:strokeWidth="1"/>
+          
+    </group>
+    
+</vector>