如何在 Android 的 Fragment 中实现谷歌地图？

在 Android 中，fragment 是 Activity 的一部分，代表屏幕上用户界面（UI）的一部分。它是 android 活动的模块化部分，对于创建本质上灵活且可根据设备屏幕尺寸自动调整的 UI 设计非常有帮助。所有设备上的 UI 灵活性提高了应用程序的用户体验和适应性。片段只能存在于活动内部，因为它的生命周期取决于宿主活动的生命周期。例如，如果宿主活动暂停，那么与该活动相关的片段的所有方法和操作都将停止运行，因此该片段也称为子活动。可以动态添加、删除或替换片段，即在活动运行时。在本文中，我们将在 Android Studio 的 Fragment 中实现 Google Map。使用它，您将能够在您的 android 应用程序中定位世界上的任何地方。

我们将在本文中构建什么？

这是我们将在本文中构建的示例视频。请注意，我们将使用Java语言制作这个项目。

分步实施

步骤 1. 密钥生成

转到网站 https://mapsplatform.google.com。会出现下图界面。单击创建项目。

如果您正在为个人项目工作，请给您的项目一个合适的名称，并给出组织的名称，然后让它成为无组织。

现在选择 Maps SDK for Android 并点击启用。

转到凭据 > 创建凭据，然后将成功生成 API 密钥。

步骤 2. 创建一个新项目

• 打开一个新项目。
• 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
• 在您方便的时候命名应用程序。
• 将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

步骤 3. 添加所需的依赖项

导航到 Gradle scripts > build.gradle(module) 并在其中使用以下依赖项-

implementation 'com.google.android.gms:play-services-maps:17.0.0'

步骤 4. 处理 XML 文件

导航到 app > res > layout > activity_main.xml 并将以下代码添加到该文件。下面是activity_main.xml文件的代码。

导航到应用程序 > 右键单击 > 新建 > 片段 > 空白片段。将其命名为 MapFragment 并在fragment_map.xml 文件中使用以下代码 -

导航到AndroidManifest.xml文件并在其中使用以下代码 -

步骤 5. 处理Java文件

导航到MainActivity。 Java文件并在其中使用以下代码。代码中添加了注释以便更好地理解。

Java

package com.example.googlemapinsidefragment;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
  
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initialize fragment
        Fragment fragment=new MapFragment();
  
        // Open fragment
        getSupportFragmentManager()
                .beginTransaction().replace(R.id.frame_layout,fragment)
                .commit();
    }
}

导航到MapFragment。 Java文件并在其中使用以下代码。代码中添加了注释以便更好地理解。

Java

package com.example.googlemapinsidefragment;
  
import android.os.Bundle;
  
import androidx.fragment.app.Fragment;
  
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
  
import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
  
public class MapFragment extends Fragment {
  
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Initialize view
        View view=inflater.inflate(R.layout.fragment_map, container, false);
  
        // Initialize map fragment
        SupportMapFragment supportMapFragment=(SupportMapFragment)
                getChildFragmentManager().findFragmentById(R.id.google_map);
  
        // Async map
        supportMapFragment.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(GoogleMap googleMap) {
                // When map is loaded
                googleMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
                    @Override
                    public void onMapClick(LatLng latLng) {
                        // When clicked on map
                        // Initialize marker options
                        MarkerOptions markerOptions=new MarkerOptions();
                        // Set position of marker
                        markerOptions.position(latLng);
                        // Set title of marker
                        markerOptions.title(latLng.latitude+" : "+latLng.longitude);
                        // Remove all marker
                        googleMap.clear();
                        // Animating to zoom the marker
                        googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng,10));
                        // Add marker on map
                        googleMap.addMarker(markerOptions);
                    }
                });
            }
        });
        // Return view
        return view;
    }
}

这是我们应用程序的最终输出。

输出：