神刀安全网

[译]React Native开源封装Google地图组件

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目: https://github.com/jiangqqlmj/js-coach-cn

开源项目地址: https://github.com/teamrota/react-native-gmaps

项目介绍

该组件对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 class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler {      private ReactInstanceManager mReactInstanceManager;     private 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())                 .addPackage(new RNGMapsPackage()) // <-- Register package here                 .setUseDeveloperSupport(BuildConfig.DEBUG)                 .setInitialLifecycleState(LifecycleState.RESUMED)                 .build();         mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);         setContentView(mReactRootView);     } ...

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

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

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

// file: android/app/src/main/AndroidManifest.xml <uses-library android:name="com.google.android.maps" /> <meta-data     android:name="com.google.android.geo.API_KEY"     android:value="YOUR_API_KEY"/>

实例

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

let RNGMap = require('react-native-gmaps');  ...  <RNGMap   ref={'gmap'}   style={ { height: 500, width: 500 } }   markers={ [         { coordinates: {lng: 0.1, lat: 51.0} },         {            coordinates: {lng: -0.1, lat: 51.0},            title: "Click marker to see this title!",           snippet: "Subtitle",           id: 0,           /*            * Able to use "my_icon" or {uri: 'my_icon', width: 100, height: 100 } here as well            */           icon: require('image!my_icon'), // <-- android/app/src/main/res/drawable/my_icon.png           /*            * color is only working with default icon            */           color: 120,         }     ] }   zoomLevel={10}   onMapChange={(e) => 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();  })

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » [译]React Native开源封装Google地图组件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮