📌  相关文章
📜  如何使用Firebase Firstore在Google Maps中添加动态标记?

📅  最后修改于: 2021-05-13 13:54:27             🧑  作者: Mango

我们已经看到在Android的Google地图中添加了标记。除此之外,我们还在Android的Google地图上添加了多个标记。许多应用程序使用动态功能在Google Maps上添加标记并根据要求进行更新。在本文中,我们将介绍如何从Android中的Firebase向Google Map添加标记。

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

我们将构建一个简单的应用程序,在其中将显示带有简单标记的地图,并从Firebase向其添加标记。我们必须将Firebase Firestore中的标记添加到我们的地图中。下面提供了一个示例视频,以使您对我们在本文中将要做的事情有个大概的了解。注意,我们将使用Java语言实现该项目。

分步实施

步骤1:创建一个新项目

要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。确保在创建新项目时选择“地图活动”。

第2步:生成用于使用Google Maps的API密钥

要生成Maps的API密钥,您可以参考 如何生成在Android中使用Google Maps的API密钥。生成Google Maps的API密钥后。我们必须将此密钥添加到我们的项目中。要在我们的应用程序中添加此密钥,请导航至values文件夹> google_maps_api.xml文件,并在第23行中,您必须在YOUR_API_KEY位置添加API密钥。

第3步:将您的应用程序与Firebase连接

创建新项目并为Google Maps添加密钥之后。导航到顶部栏上的“工具”选项。在里面单击Firebase。单击Firebase后,您可以在屏幕快照中看到下面提到的右列。

在该列内,导航到Firebase Cloud Firestore。单击该选项,您将在“将应用程序连接到Firebase”和“将Cloud Firestore添加到您的应用程序”中看到两个选项。单击立即连接选项,您的应用程序将连接到Firebase。之后,单击第二个选项,现在您的应用已连接到Firebase。将您的应用程序连接到Firebase后,您将看到以下屏幕。

之后,确认已将Firebase Firestore数据库的依赖项添加到我们的Gradle文件中。导航到该文件内的应用程序> Gradle脚本。检查是否添加了以下依赖项。如果您的build.gradle文件中不存在以下依赖项。在“依赖项”部分中添加以下依赖项。

添加此依赖项后,同步您的项目,现在我们可以创建我们的应用程序了。如果您想了解有关将您的应用程序连接到Firebase的更多信息。请参阅本文以详细了解如何将Firebase添加到Android App。

步骤4:使用AndroidManifest.xml文件

要将数据添加到Firebase,我们必须授予访问Internet的权限。要添加这些权限,请导航至应用程序> AndroidManifest.xml 。在该文件内,向其添加以下权限。

XML

 


Java
import android.os.Bundle;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.fragment.app.FragmentActivity;
  
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;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.GeoPoint;
  
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
  
    private GoogleMap mMap;
    FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
          
        // initializing our firebase firestore.
        db = FirebaseFirestore.getInstance();
         
        // Obtain the SupportMapFragment and get 
        // notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
      
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
          
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MapsData").document("7QWDor9vozLaHdFYV9kh");
          
        // calling document reference class with on snap shot listener.
        documentReference.addSnapshotListener(new EventListener() {
            @Override
            public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
                if (value != null && value.exists()) {
                    // below line is to create a geo point and we are getting
                    // geo point from firebase and setting to it.
                    GeoPoint geoPoint = value.getGeoPoint("geoPoint");
                      
                    // getting latitude and longitude from geo point 
                    // and setting it to our location.
                    LatLng location = new LatLng(geoPoint.getLatitude(), geoPoint.getLongitude());
                      
                    // adding marker to each location on google maps
                    mMap.addMarker(new MarkerOptions().position(location).title("Marker"));
                      
                    // below line is use to move camera.
                    mMap.moveCamera(CameraUpdateFactory.newLatLng(location));
                } else {
                    Toast.makeText(MapsActivity.this, "Error found is " + error, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}


第5步:使用MapsActivity。 Java文件

转到MapsActivity。 Java文件并参考以下代码。以下是MapsActivity的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。

Java

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.fragment.app.FragmentActivity;
  
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;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.GeoPoint;
  
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
  
    private GoogleMap mMap;
    FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
          
        // initializing our firebase firestore.
        db = FirebaseFirestore.getInstance();
         
        // Obtain the SupportMapFragment and get 
        // notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
      
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
          
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MapsData").document("7QWDor9vozLaHdFYV9kh");
          
        // calling document reference class with on snap shot listener.
        documentReference.addSnapshotListener(new EventListener() {
            @Override
            public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
                if (value != null && value.exists()) {
                    // below line is to create a geo point and we are getting
                    // geo point from firebase and setting to it.
                    GeoPoint geoPoint = value.getGeoPoint("geoPoint");
                      
                    // getting latitude and longitude from geo point 
                    // and setting it to our location.
                    LatLng location = new LatLng(geoPoint.getLatitude(), geoPoint.getLongitude());
                      
                    // adding marker to each location on google maps
                    mMap.addMarker(new MarkerOptions().position(location).title("Marker"));
                      
                    // below line is use to move camera.
                    mMap.moveCamera(CameraUpdateFactory.newLatLng(location));
                } else {
                    Toast.makeText(MapsActivity.this, "Error found is " + error, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

第6步:在Android中将数据添加到Firebase Firestore

转到浏览器,然后在浏览器中打开Firebase。打开Firebase后,您将看到以下页面,并且在此页面上,单击右上角的“转到控制台”选项。

单击此屏幕后,您将看到下面的屏幕,其中包含您选择的项目的所有项目。

在该屏幕内,单击左侧窗口中的n Firebase Firestore数据库。

单击创建数据库选项后,您将看到以下屏幕。

在此屏幕内,我们必须选择“以测试模式启动”选项。我们正在使用测试模式,因为我们未在应用内设置身份验证。因此,我们选择在测试模式下启动。选择测试模式后,单击下一步选项,您将看到以下屏幕。

在此屏幕内,我们只需单击“启用”按钮即可启用我们的Firebase Firestore数据库。完成此过程后,我们只需运行我们的应用程序并在我们的应用程序内添加数据,然后单击“提交”按钮。要添加数据,只需单击“开始收集”按钮,然后将收集ID提供为MapsData即可。之后,提供文档ID为7QWDor9vozLaHdFYV9kh并在字段内写下geoPoint ,然后选择type作为geopoint ,然后输入所需位置的纬度经度。最后单击“保存”按钮。

将数据添加到Firebase之后。现在运行您的应用程序,并查看该应用程序的输出。您可以使用纬度和经度字段来更改geopoint中的值,并且可以通过添加标记来查看地图上的实时更新。

输出:

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处,前往由我们的专家精心策划的指南,以使您立即做好行业准备!