[译]React Native 开源封装 Google 地图组件 (react-native-google-maps)

项目介绍

该组件对Google Map地图进行轻量级别的封装,暂时只是针对于Android平台。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.1.下载安装APK包

点击这边检测并且安装

1.2.安装依赖包

npm install react-native-gmaps --save

1.3.更新Gradle设置

// file: android/settings.gradle
...
 
include ':react-native-gmaps', ':app'
project(':react-native-gmaps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gmaps/android/app')

1.4.更新app gradle配置

// file: android/app/build.gradle
...
 
dependencies {
    ...
    compile project(':react-native-gmaps')
}

1.5.注册模块

...
import com.rota.rngmaps.RNGMapsPackage; // <-- import="" public="" mainactivity="" extends="" fragmentactivity="" implements="" defaulthardwarebackbtnhandler="" {="" private="" reactinstancemanager="" mreactinstancemanager;="" reactrootview="" mreactrootview;="" @override="" protected="" void="" oncreate(bundle="" savedinstancestate)="" super.oncreate(savedinstancestate);="" mreactrootview="new" reactrootview(this);="" mreactinstancemanager="ReactInstanceManager.builder()" .setapplication(getapplication())="" .setbundleassetname("index.android.bundle")="" .setjsmainmodulename("index.android")="" .addpackage(new="" mainreactpackage())="" rngmapspackage())="" <--="" register="" package="" here="" .setusedevelopersupport(buildconfig.debug)="" .setinitiallifecyclestate(lifecyclestate.resumed)="" .build();="" mreactrootview.startreactapplication(mreactinstancemanager,="" "awesomeproject",="" null);="" setcontentview(mreactrootview);="" }="" ...="" <="" code="">

1.6.添加Google Map模块到项目中

修改AndroidMainifset.xml文件，确保下面的配置信息在application标签底部

更多API keys信息点击了解....

// file: android/app/src/main/AndroidManifest.xml

实例

你可以根据下面的属性进行构建你的地图，下面这些属性都可以选的(如果没有任何属性的控制，该会默认以伦敦为中心)。同时你必须需要设置地图的宽度和高度

let RNGMap = require('react-native-gmaps');
 
...
 
 console.log(e)}
  onMapError={(e) => console.log('Map error --> ', e)}
  center={ { lng: 0.1, lat: 51.0 } } 
  /*
   * clickMarker shows Info Window of Marker with id: 0,
   * hides Info Window if given null
   */
  clickMarker={0}/>

2.1.onMapChange

该方法在地图位置每次进行移动的时候进行调用

2.2.onMapError

该方法在地图使用过程中发生错误的时候进行调用。目前拦截的错误有以下两种:

①.Map is null  { message: 'Map is null', type: 'map_null' }  如果你没有安装Google Play  Apk包就不会包当前错误

②.Map init error - { message: 'Map initialize error', 'map_init_error' }   初始化错误

2.2.zoomOnMarkers  给地图上面添加标注

APi模块-多段线模块

var Polyline = require('react-native-gmaps/Polyline');

Polyline.create({
  color: '#0000cc',
  width: 15,
  geodesic: true,
  visible: true,
  points: [
    [51.5, -0.1], [40.7, -74.0]
  ]
}, function(polyline) {
  polyline.addPoint(45.5192919, -73.6169509, function(success) {
    console.log("- addPoint success");
  });

  polyline.setState({
    color: '#ff0000',
    width: 20
  }, function(success) {
    console.log('- setState success');
  });

  // Remove it
  polyline.remove();

})