React Native Google Maps

2025 年 1 月 12 日 | 3 分钟阅读

Google map 用于在移动设备中定位地址、导航和搜索位置。 Google Maps 使用点标记显示位置（纬度和经度）。在 react-native 中，Google Maps 可以使用 react-native-maps npm 库轻松集成。要在我们的应用程序中使用 Google Maps，我们需要对 Google Maps API 进行身份验证。

1. 创建 react-native 项目

创建 react-native 项目并使用以下命令安装 react-native-maps 库

成功执行上述代码后，它会安装 react-native-maps 库，可以在 package.json 文件中看到。

2. 从 Google Developer Console 生成 Google Maps 身份验证 API 密钥

2.1 要在我们的应用程序中使用 Google Maps，我们需要生成并验证 Google Maps API 密钥。使用您的 Google 邮件帐户登录 https://console.developers.google.com/ 并创建一个新项目。

2.2 现在，单击 API 和服务 -> 凭据 -> 创建凭据 以创建 API 凭据。

2.3 它将弹出您的 API 密钥以及消息 API 密钥已创建。

2.4 要查看您的 API 密钥的概述，请单击 Google Maps -> 概述。

2.5 现在，转到 API 库并选择适用于 Android 的 Maps SDK 以启用 Map API。

3. 打开您的 project_name -> android -> setting.gradle 文件并添加以下代码

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

4. 再次打开您的 project_name ->android -> build.gradle 文件，并在 dependencies 块中添加以下代码。

5. 转到 project_name -> android ->app->src->main->java->com->project_name-> MainApplication.java 并添加以下代码

import com.airbnb.android.react.maps.MapsPackage;
...
new MapsPackage()

MainApplication.java

package com.maps;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.airbnb.android.react.maps.MapsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.airbnb.android.react.maps.MapsPackage;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new MapsPackage()
      );
    }
    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }

6. 在您的 project_name -> android -> app -> src -> main ->AndroidManifest.xml 文件中，将以下代码添加到 application 标签内。

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your_Google_API_Key"/>

7. 从 App.js 文件中的 react-native-maps 库中导入 MapView 和 Marker 组件。

MapView： 它用于在项目中显示 MapView 组件。

Marker： 它用于显示红色的圆形标记，以在 Google Maps 中精确定位确切位置。

App.js

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';

export default class App extends Component {
  render() {
    return (
      <View style={styles.MainContainer}>

        <MapView
          style={styles.mapStyle}
          showsUserLocation={false}
          zoomEnabled={true}
          zoomControlEnabled={true}
          initialRegion={{
            latitude: 28.579660, 
            longitude: 77.321110,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>

          <Marker
            coordinate={{ latitude: 28.579660, longitude: 77.321110 }}
            title={"JavaTpoint"}
            description={"Java Training Institute"}
          />
        </MapView>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  mapStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

输出