初探React-native+百度地图

J_O
1,999 阅读2分钟

前言

最近在使用React-native做一个Android项目，其中涉及到地点定位。于是到Github搜索了一下React-native中可使用的地图插件有哪些。其中有高德地图的react-native-amap3d和百度地图的react-native-baidu-map★数较高，看了下使用介绍，貌似百度地图的较为详细，于是就它了。

申请密钥

  1. 进入百度地图开放平台，注册登录账号
  2. 选择开发文档中的Android SDK
    图1
  3. 选择获取密钥，然后添加应用
  4. 填写信息
  • 名称随便
  • 应用类型选择Android SDK
  • PackageName可在AndroidManifest.xml查看，一般为com.项目名称小写
    图2
    图3
  • 获取开发版SHA1 首先打开终端(Win图标键+R)，进入.android
cd .android

然后输入一下指令，密钥库口令默认为android

keytool -v -list -keystore debug.keystore
  • 获取发布版SHA1
    由于是初次使用，所以获取前我们需要先去Android Studio，在AS的build里选择Generate Signed Bundle/APK，选择APK
    图4
    然后，create new，填写key store path，password和confirm即可，最终创建出一个xxx.jks文件。
    最后，cd进入xxx.jks文件所在目录，执行以下指令便可得到发布版SHA1
keytool -v -list -keystore xxx.jks

配置步骤

  1. 导入包，这里的版本为"^1.0.26"
yarn add react-native-baidu-map
  1. link
react-native link react-native-baidu-map
  1. 修改AndroidManifest.xml
  • 开启权限
<!-- 访问GPS定位 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
  • 添加申请到的AK到application内
<meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="你的AK"/>

至此，我们的配置便完成了，可以开启定位之旅了。

地图定位

这里我们便以一个小Demo来快速学习一下百度地图如何在React-Native项目运用吧！
首先，我们导入需要用到的组件。

import React, { Component } from 'react';
import { View } from 'react-native'
import { MapView, MapTypes, Overlay} from 'react-native-baidu-map'
import styles from '../assets/styles/LightMap'
import HeaderTitle from '../components/HeaderTitle'

然后，构建一下百度地图需要用到的一些属性和属性值。

this.state = {
  mayType: MapTypes.NORMAL, //地图类型
  zoom: 15, // 比例
  trafficEnabled: true,
  baiduHeatMapEnabled: true,
  center: { // 点位点
    latitude: props.navigation.state.params.lat,
    longitude: props.navigation.state.params.lng
  }
}

接着，我们就可以使用组件构建地图了。

  render() {
    const { Marker, Cluster} = Overlay
    return (
      <>
        {/* 自定义的头部 */}
        <HeaderTitle title={this.props.navigation.state.params.title}
          navigation={this.props.navigation} hasBack={true}></HeaderTitle>
          {/* 百度地图 */}
        <View style={styles.container}>
          <MapView
            trafficEnabled={this.state.trafficEnabled}
            baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
            zoom={this.state.zoom}
            mapType={this.state.mapType}
            center={this.state.center}
            style={styles.map}
            onMapClick={(e) => {
            }}>
            <Cluster>
              <Marker location={{ ...this.state.center }} />
            </Cluster>
          </MapView>
        </View>
      </>
    )
  }

最后，让我们来瞧瞧最后的额结果吧！

图5

结语

此文主要是记录小编第一次在React-Native使用百度地图，可能没有用到百度地图更多的功能。其他功能使用能可以参考百度地图的react-native-baidu-map哦。
ps: 另附此次React-Native项目地址猫眼电影android，如果对您有帮助请为小编送上★★哦^_^.

avatar
文章
阅读
粉丝