native中地图 react

2018-05-30 00:02:10 weixin_34198881 阅读数 327

写在前面

在React Native 地图组件选择中我做了很多尝试,以下是我的一些建议和总结。

1.react-native-maps 对iOS十分友好,但是对android并不友好,需要google play支持。
2.react-native-amap3d 国内优秀开源库基于高德地图SDK,无条件支持,但是在遇到复杂需求时就会比较鸡肋,如自定义瓦片图层、大量数据渲染卡顿等
3.react-native-mapbox-gl 弥补了上面的缺点,而且拓展性非常高,也是这篇文章主要要写的。

GeoJSON

什么是GeoJSON?

使用mapbox不得不先了解以下GeoJSON格式规范,首先po个对比,
使用第1,2个库时,我们渲染多个坐标点可能是这样的,使用类似<Marker>的组件通过数组遍历并渲染,一个点需要一个<Marker>
//数据
const data = [
    {coordinate:[100.0, 0.0]]},
    {coordinate:[101.0, 1.0]]},
    {coordinate:[100.1, 1.0]]},
    {coordinate:[101.1, 0.0]]},
]
//组件
<MapView>
    {data.map(marker=>{
        return (
            <Marker
              ...props
              coordinate={marker.coordinate}
            />
        )
    })}
</MapView>
使用mapbox-gl时思想完全变了,
这里先不急介绍组件的用法,可以轻易看出没有了数组的循环遍历
//数据
const geoJSON = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "id0",
            "geometry": {
                "type": "MultiPoint",
                "coordinates":[
                    [100.0, 0.0], [101.0, 1.0],
                    [100.0, 1.0], [101.0, 0.0],
                    ...
                ]
            }
        }
    ]
}
//组件
<MapboxGL.ShapeSource shape={geoJSON}>
    <MapboxGL.SymbolLayer 
        style={[styles.mark, 
            {textField: '{text}',iconImage : '{icon}'}
        ]}
    />
</MapboxGL.ShapeSource>

GeoJSON文档

GeoJSON是基于JavaScript 对象表示法的地理空间信息数据交换格式
GeoJSON文档地址

GeoJSON解构


type基础类型
  • Point
  • LineString
  • Polygon
  • MultiPoint
  • MultiLineString
  • MultiPolygon
{
    "type":'几何形状的类型',
    "coordinates":[]    //坐标点
}

Geometry primitives
Multipart geometries

type高级类型

GeometryCollection
点、线、面的集合

{
   "type": "GeometryCollection",
   "geometries": [
       {
           "type": "Point",
           "coordinates": [100.0, 0.0]
       },
       {
           "type": "LineString",
           "coordinates": [
               [101.0, 0.0], [102.0, 1.0]
           ]
       }
   ]
}

Feature
GeometryCollection基础上可添加最标点的属性properties

{
   "type": "Feature",
   "geometry": {
       "type": "LineString",
       "coordinates": [
           [100.0, 0.0], [101.0, 1.0]
       ]
   },
   "properties": {
       "prop0": "value0",
       "prop1": "value1"
   }
}

geometry内可以使用"GeometryCollection"

{
   "type": "Feature",
   "geometry": {
      "type": "GeometryCollection",
      "geometries": [
          {
            "type": "Point",
            "coordinates": [100.0, 0.0]
          },
          {
            "type": "LineString",
            "coordinates": [
                [101.0, 0.0], [102.0, 1.0]
            ]
          }
      ]
   },
   "properties": {
       "prop0": "value0",
       "prop1": "value1"
   }
}

FeatureCollection
Feature集合

{
   "type": "FeatureCollection",
   "features": [
       {
           "type": "Feature",
           "id": "id0",
           "geometry": {
               "type": "LineString",
               "coordinates": [
                   [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
               ]
           },
           "properties": {
               "prop0": "value0",
               "prop1": "value1"
           }
       },
       {
           "type": "Feature",
           "id": "id1",
           "geometry": {
               "type": "Polygon",
               "coordinates": [
                   [
                       [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]
                   ]
               ]
           },
           "properties": {
               "prop0": "value0",
               "prop1": "value1"
           }
       }
   ]
}

properties
样式集合
geojson.io

crs
坐标参考规则:地球坐标,火星坐标

"crs": {
  "type": "EPSG",
  "properties": { 
     "code": 4326,
     "coordinate_order": [1, 0]
  }
}

注意:要使用GeoJSON,就必须抛开之前的靠大量DOM渲染思想,这在理解上会成为绊脚石,我之前就困扰了很久

GeoJSON在线生成工具

http://geojson.io

案例

https://github.com/1uokun/rea...

2018-07-11 21:24:08 hxy19971101 阅读数 3084

开源地址:https://github.com/lovebing/react-native-baidu-map   

今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑...

1、Install 安装

 

npm install react-native-baidu-map --save

 

2、在settings.gradle中添加以下内容

include ':app'
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

3、在build.gradle中添加:

 

 

compile project(':react-native-baidu-map')

 

 

如下:

 

4、修改MainApplication.java 文件

添加:new BaiduMapPackage(getApplicationContext())

 

 

除此之外,别忘了将包导进来:不过一般都会自动导进来。
MainApplication

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

 

5、修改AndroidMainifest.xml 文件

 

1)配置各种权限

2)添加com.baidu.lbsapi.API_KEY
完整文件如下:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.market">

     <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
 
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <meta-data
          android:name="com.baidu.lbsapi.API_KEY"
          android:value="换成你自己的apikey"/>
     <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

获得Android签名的sha1值:

 

第1步:运行进入控制台

and_key6.png and_key7.png

第2步:定位到.android文件夹下,输入cd .android

and_key8.png

第3步:输入keytool -list -v -keystore debug.keystore,会得到三种指纹证书,选取SHA1类型的证书(密钥口令是android),例如:

其中keytool为jdk自带工具;keystorefile为Android 签名证书文件

and_key9.png

and_key10.png

7、修改Demo程序

直接使用提供的Demo源文件

 

import BaiduMapDemo from './BaiduMapDemo';

 

 

遇到的问题:

 

修改BaiduMapPackage.js中的第49行  删除 @Override

在编译器目录中找不到、直接在文件中搜索该文件

然后又出现了图示的错误:

这是因为在新版React Native中proptype需要单独引入,

删除MapView.js中老版本定义的PropTypes

在MapView.js中加入:

import PropTypes from 'prop-types';

这样就完成了,分享一下运行结果:

打包成apk后,会出现地图无法显示的情况,这是因为配置的是开发版,必须要配置发布版,

配置时候运行如下命令:

keytool -v -list -keystore E:/XXX.jksXXX.jks (此处写你自己的key

 

配置后将生成的SHA1配置到百度地图的后台。

 

2018-09-28 14:37:12 qq_39910762 阅读数 5972

声明:本文使用的是作者未更新之前的低版本,不是最新的版本(看仔细在配置)

低版本号为:"react-native-baidu-map": "^0.6.0" ,前往1.0.6版

在 Xcode 9.4上运行,10.1运行编译有问题

GitHub:https://github.com/lovebing/react-native-baidu-map


先到百度地图创建应用:

申请开发版SHA1:

打开终端,输入命令:cd .android,回车继续输入以下命令

keytool -list -v -keystore debug.keystore  

口令默认为 android

 

得到开发版 SHA1

 

发布版 SHA1:以 Android Stutio 为例(Keytool生成看最下面):

打开 build => Generate Signed APK

选择新建:

 

一路 next  最后 finish,在项目 android/app 下生成一个 .keystore 文件

继续在命令行中输入 

keytool -list -v -keystore   apk的keystore(文件路径)

接下来输入刚才的密码:

得到发布版 SHA1:

 

Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

keytool工具是Java JDK自带的证书工具
-genkey参数表示:要生成一个证书(版权、身份识别的安全证书)
-alias参数表示:证书有别名,-alias fantongyo.keystore表示证书别名为:my-release-keystore
-keyalg RSA表示加密类型,RSA表示需要加密,以防止别人盗取
-validity 20000表示有效时间20000天
-keystore my-release-keystore.keystore表示要生成的证书名称为my-release-keystore

--------------------------------------------------------------------------------------------

输入命令:Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore,到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (Permission denied).

原因:缺少权限

方法一更改保存目录:就是讲jdk从c盘挪到其它盘。

方法二更改权限:以管理员身份运行CMD,MAC 下添加 sudo 

sudo Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

 

安装 npm i react-native-baidu-map --save

android配置:

在项目的 android/settings.gradle目录 下添加:

include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

 在android/app/build.gradle 中添加

    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
    dependencies {
      implementation project(':react-native-baidu-map') // 添加的一行
      ...
    } 

在gradle.properties中添加

MYAPP_RELEASE_STORE_FILE=my-release-keystore.keystore
MYAPP_RELEASE_KEY_ALIAS=my-release-keystore.keystore (和自己之前起的文件名要一致)
MYAPP_RELEASE_STORE_PASSWORD=****** (自己设置的密码)
MYAPP_RELEASE_KEY_PASSWORD=******

在android/app/src/main/AndroidManifest.xml 中添加

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<application
  ...
  <meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key 
  ...
  </application>

MainApplication.java 中添加:

    import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加

    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new BaiduMapPackage(getApplicationContext()) //add this
      );
    }

在node_modules/react-native-baidu-map中修改 MapView.js

修改前:
import React, {
  Component,
  PropTypes
} from 'react';

修改后:
import React, {
  Component,
} from 'react';
import PropTypes from 'prop-types'

在node_modules/react-native-baidu-map/android 下修改 BaiduMapPackage.java

删除或注释第 49 行的:@Override

 

ios 配置:

1、Project navigator->Libraries->Add Files to 选择 react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

2、Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

继续添加依赖,点击 Add Other:

 

3、Project navigator->Build Settings->Search Paths,

Framework search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib,

Header search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap

(也可以在node_modules文件下将对应文件直接拖进去,感谢@_摩西_的提醒)

4、添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk, CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd(xcode7以前为 libsqlite3.0.dylib)、CoreTelephony.framework 、libstdc++.6.0.9.tbd(xcode7以前为libstdc++.6.0.9.dylib)

添加方法同第二步,

5、添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

将node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle拖进xcode与项目同名的文件夹下

6、AppDelegate.m init 初始化

#import "RCTBaiduMapViewManager.h"

//百度地图

  [RCTBaiduMapViewManager initSDK:@"api key"];

 

1、error: Redefinition of ‘RCTMethodInfo’ :

2、error: 'RCTViewManager.h' file not found

 

js代码:

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Platform,
} from 'react-native';

import { MapView,MapTypes,Geolocation} from 'react-native-baidu-map';

import Dimensions from 'Dimensions';
const { width,height } = Dimensions.get('window');

export default class BaiduMapDemo extends Component {
    constructor() {
        super();
        this.state = {
            zoomControlsVisible: true,
            trafficEnabled: false,
            baiduHeatMapEnabled: false,
            mapType: MapTypes.NORMAL,
            zoom: 15,
            center: {
                longitude: 113.896198,
                latitude: 22.959144,
            },
            markers: [
                {
                    longitude: 113.896198,
                    latitude: 22.959144,
                    title: 'title',
                }
            ],
            clickMessage: '',
            poiMessage: '',
        };
    }

    componentDidMount() {
        
    }

  render() {
        return (
            <ScrollView style={styles.container}>
                <MapView 
                    zoomControlsVisible={this.state.zoomControlsVisible} //默认true,是否显示缩放控件,仅支持android
                    trafficEnabled={this.state.trafficEnabled} //默认false,是否显示交通线
                    baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} //默认false,是否显示热力图
                    mapType={this.state.mapType} //地图模式,NORMAL普通 SATELLITE卫星图
                    zoom={this.state.zoom} //缩放等级,默认为10
                    center={this.state.center} // 地图中心位置
                    markers={this.state.markers} //地图多个标记点

                    onMapLoaded={(e) => { //地图加载事件
                        Geolocation.getCurrentPosition()
                            .then(data => {
                                console.log(data)
                                // this.setState({
                                //     center: {
                                //         longitude: data.longitude,
                                //         latitude: data.latitude
                                //     },
                                //     markers: [{
                                //         longitude: data.longitude,
                                //         latitude: data.latitude,
                                //         title: data.district + data.street
                                //     }]
                                // })
                            })
                            .catch(e =>{
                                console.warn(e, 'error');
                            })
                    }}
                    
                    onMarkerClick={(e) => { //标记点点击事件
                        console.log(e)
                    }}
                    onMapClick={(e) => { //地图空白区域点击事件,返回经纬度
                        let title = '';
                        Geolocation.reverseGeoCode(e.latitude,e.longitude)
                            .then(res => {
                                console.log(res)
                                Platform.OS == 'ios' ? 
                                    title = res.district + res.streetName
                                :
                                    title = res.district + res.street;
                                this.setState({
                                    center: {
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                    },
                                    markers: [{
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                        title: title,
                                    }],
                                    clickMessage: JSON.stringify(res)
                                })
                            })
                            .catch(err => {
                                console.log(err)
                            })
                        
                    }}
                    onMapPoiClick={(e) => { //地图已有点点击
                        Geolocation.reverseGeoCode(e.latitude,e.longitude)
                            .then(res => {
                                res = JSON.stringify(res)
                                this.setState({
                                    center: {
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                    },
                                    markers: [{
                                        longitude: e.longitude,
                                        latitude: e.latitude,
                                        title: e.name,
                                    }],
                                    poiMessage: res
                                })
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    }}
                    style={styles.map}
                >
                </MapView>

                <View style={styles.list}>
                    <Text>地图缩放控件状态: </Text>
                    {this.state.zoomControlsVisible ? 
                        <Text onPress={() => this.setState({zoomControlsVisible:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({zoomControlsVisible:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>交通线状态: </Text>
                    {this.state.trafficEnabled ? 
                        <Text onPress={() => this.setState({trafficEnabled:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({trafficEnabled:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>热力图状态: </Text>
                    {this.state.baiduHeatMapEnabled ? 
                        <Text onPress={() => this.setState({baiduHeatMapEnabled:false})}>显示</Text>
                        :
                        <Text onPress={() => this.setState({baiduHeatMapEnabled:true})}>关闭</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>地图模式状态: </Text>
                    {this.state.mapType == MapTypes.NORMAL ? 
                        <Text onPress={() => this.setState({mapType:MapTypes.SATELLITE})}>普通</Text>
                        :
                        <Text onPress={() => this.setState({mapType:MapTypes.NORMAL})}>卫星</Text>
                    }
                </View>
                <View style={styles.list}>
                    <Text>地图空白区域点击信息: </Text>
                </View>
                <View style={styles.list}>
                    <Text>{this.state.clickMessage}</Text>
                </View>
                <View style={styles.list}>
                    <Text>地图已有点点击信息: </Text>
                </View>
                <View style={styles.list}>
                    <Text>{this.state.poiMessage}</Text>
                </View>
                <View style={styles.list}>
                    <Text onPress={() => {
                        Geolocation.getCurrentPosition()
                            .then(data => {
                                console.log(data)
                                this.setState({
                                    center: {
                                        longitude: data.longitude,
                                        latitude: data.latitude
                                    },
                                    markers: [{
                                        longitude: data.longitude,
                                        latitude: data.latitude,
                                        title: data.district + data.street
                                    }]
                                })
                            })
                            .catch(e =>{
                                console.warn(e, 'error');
                            })
                    }}>当前位置</Text>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    map: {
        width: width,
        height: height - 300,
        marginBottom: 5,
    },
    list: {
        flexDirection: 'row',
        paddingLeft: 10,
        marginBottom: 5,
    }
});

 

ios效果图:

android效果图:

 

 

2019-08-09 11:24:58 qq_34273059 阅读数 1376
需求 : react-native项目中需要使用高德地图组件;有基本的轨迹以及marker功能;
  • react-native-amap-geolocation
  • react-native-smart-amap
  • react-native-amap3d
  • react-native-maps

    对比了一些,感觉比较全的还是react-native-community的react-native-maps ;but没找到其可以使用高德地图,只能使用Google map?!!于是,只好选其他的了,最终选择了eact-native-amap3d,效果以及简单使用如下:

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { MapView,Marker,Polyline,Polygon } from 'react-native-amap3d';

var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;



class CarDetailsPage extends Component {
  constructor(props) {
    super(props);
    console.disableYellowBox = true;
    this.state = {
    //****
    };
  }
  componentWillMount () {  
  }

 
  render() {  
    return (
      <Container>
        <View style={{ flex: 1 }}>
          <MapView
            draggable
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}
              mapType={'standard'}
              zoomLevel={12}
              zoomEnabled={true}
              scrollEnabled={true}
              rotateEnabled={true}
              style={styles.mapStyles}
              showsZoomControls={false}
              zoomLevel={15}
          >      
    
			//画marker 
            <Marker 
              key={navigation.getParam('currentCarName','')}
              active
              title={navigation.getParam('currentCarName','')}
              color='blue'
              description={'battery:'+this.props.carwebsocket.carstatus.battery}
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}/>
                 
        	
        	//画框
            <Polygon 
            coordinates={gps} 
            fillColor={'transparent'} 
            strokeColor={'#1398E2'} 
            strokeWidth={4}
            ></Polygon>  
                 
            //画线条
            <Polyline
              width={10}
              color='rgba(255, 0, 0, 0.5)'
              
              coordinates={[
                {
                  latitude: 40.006901,
                  longitude: 116.097972,
                },
                {
                  latitude: 40.006901,
                  longitude: 116.597972,
                },
                {
                  latitude: 39.706901,
                  longitude: 116.597972,
                },
              ]}
            />      
           

          </MapView>
         
  

         </View>
      </Container>
    );
  }
}
const styles = {
  mapStyles:{
    height:deviceHeight,
    width:deviceWidth
  }
}

export default CarDetailsPage;

虽然react-native-amap3d个人觉得稍微有些组件不够丰富完善,有些遗憾;但是基础功能是够用的,以及配置使用还是比较方便的

2016-09-30 16:26:55 hsbirenjie 阅读数 15270

上一篇文章写了ReactNative自带的MapView,很显然不是我们想要的。

今天我们介绍一下一个开源的百度地图开源组件,详细描述它的使用方法。

开源地址:https://github.com/lovebing/react-native-baidu-map   

百度地图 React Native 模块,支持 react native 0.30+


好,我们来描述它的使用步骤,以及需要注意的问题,我是在Android的AS环境下使用。

为了测试这个组件,我新react-native init 了一个项目,npm install   等,这个过程不是本文重点,不了解的可以自行百度。


1、Install 安装

npm install react-native-baidu-map --save



2、在settings.gradle中添加以下内容

include ':app'
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')


3、在build.gradle中添加:

compile project(':react-native-baidu-map')

栗子:



4、修改MainApplication.java 文件

添加:new BaiduMapPackage(getApplicationContext())

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new BaiduMapPackage(getApplicationContext())
  );
}


5、修改AndroidMainifest.xml 文件

此文件有2处需要注意

1)配置各种权限

2)添加com.baidu.lbsapi.API_KEY
完整文件如下:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.baidumapdemo"
    android:versionCode="1"
    android:versionName="1.0">

    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

      <meta-data
          android:name="com.baidu.lbsapi.API_KEY"
          android:value="fclg9DDiwCwF1zChtZGbK3MUP4Ex68qg"/>
          
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>


6、解决:Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败  错误

出现这个错误,是因为需要将com.baidu.lbsapi.API_KEY修改为我们自己的value。

这里就涉及到需要申请百度地图API KEY,可以参考文章 http://blog.csdn.net/lb377463323/article/details/47170441

需要说明的是:在Mac下debug.keystore的目录是 /Users/xxx/.android/debug.keystore

申请完成后,value如下:




7、修改Demo程序

直接使用提供的Demo源文件

import BaiduMapDemo from './BaiduMapDemo';


8、运行效果




到此,我们已经集成好了这个开源的百度地图插件。


再次感谢开源作者:https://github.com/lovebing/react-native-baidu-map