react native 高德定位 react-native-amap-geolocation-程序员宅基地

技术标签: android  高德地图  react native  ios  

react native开发的时候用到的这个高德的定位模块【react-native-amap-geolocation】

 

支持android和ios,在这里简单的捋一下流程。

一、申请apiKey

由于【react-native-amap-geolocation】使用的高德地图,因此使用前需要先申请apiKey,这里android和ios都要申请。

        1.登录/注册【高德开发平台】

        2.登录后进入应用管理(鼠标移动到右上角的个人头像,点击显示出的【应用管理选项】)

        

         3.创建新应用(右上角头像下面)

        

        输入应用名称和应用类型,这里的应用名称不必和你的项目名称完全一样

         

         4.添加Key

        一开始我们的应用下是空的,这时需要添加key,点击右侧的【添加】按钮,注意安卓和ios是分开的,也就是说如果这两个平台都要使用的话要添加两次

         申请安卓Key选择【Android平台】,必填的有【Key名称、发布版安全吗SHA1、PackageName】官方都有写获取方式,点击【如何获取】可以查看。【调试版安全码SHA1】不是必填,要获取的话可以参照【发布版安全吗SHA1】的【如何获取】另行查询。

【提交】后会生成一个用于android使用的key

如果还需要使用ios平台则再次点击添加

 

 这次选择ios平台,需要的【安全码Bundle ID】同样可以在【如何获取】中查看详细的获取方式

 至此两个平台的key就申请完成了

二、下载安装依赖:

         npm i react-native-amap-geolocation

        或

        yarn add react-native-amap-geolocation

        

三、Android配置流程:

        1.android\app\src\main\AndroidManifest.xml

        添加:

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.hardware.location.gps"/>
<!--用于访问wifi网络信息,wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
<!--这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位-->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
<!--用于申请调用A-GPS模块-->
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"></uses-permission>
<!--允许程序设置内置sd卡的写权限-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--允许程序获取网络状态-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--允许程序读写手机状态和身份-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

         2.android\settings.gradle

        添加

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

四、IOS配置

        1.打开【info.plist】 文件添加以下三项,【key是固定的,value描述可以随便写】

                Privacy - Location Always and When In Use Usage Description

                Privacy - Location Always Usage Description

                Privacy - Location When In Use Usage Description

        2.设置打开Location updates

                在TARGETS -》xxxxApp -》Signing & Capabilities -》Background Modes -》 Location updates

                如果没找到【Background Modes】可以按照以下步骤添加

                点击【+】在弹出框中搜索【Background Modes】

五、代码

        1.导入包【一般导入这四个就够用】

                import { init, Geolocation, setAllowsBackgroundLocationUpdates} from "react-native-amap-geolocation"

                 init:用来初始化

                Geolocation:用来定位

                setAllowsBackgroundLocationUpdates:用来配置ios后台定位

        2.初始化

         3.定位

到此结束

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Bombas/article/details/123628637

智能推荐

python request.session get() got an unexpected keyword argument 'cookies'_session.request() got an unexpected keyword argume-程序员宅基地

文章浏览阅读1w次。有问题版本:2.20.0使用命令: pip install -U requests版本升级至:2.22.0问题解决_session.request() got an unexpected keyword argument 'referer

android 模拟器命令 附:模拟器不能联网设置_安卓手机网络限制模拟工具-程序员宅基地

文章浏览阅读9.4k次。1、Android模拟器介绍Android中提供了一个模拟器来模拟ARM核的移动设备。Android的模拟器是基于QEMU开发的,QEMU是一个有名的开源虚拟机项目(详见http://bellard.org/qemu/),它可以提供一个虚拟的ARM移动设备。Android模拟器被命名为goldfish,用来模拟包括下面一些功能的ARM SoC:* ARM926ej-S CPU_安卓手机网络限制模拟工具

使用HttpUrlConnection进行post请求上传文件_httputil.formpost-程序员宅基地

文章浏览阅读1k次。使用HttpUrlConnection模拟post表单进行文件上传平时很少使用,比较麻烦。 原理是: 分析文件上传的数据格式,然后根据格式构造相应的发送给服务器的字符串。格式如下:这里的httppost123是我自己构造的字符串,可以是其他任何的字符串----------httppost123 (\r\n)Content-Disposition: form-da_httputil.formpost

识别和匹配idc配置文件_no input device configuration file found for devic-程序员宅基地

文章浏览阅读598次。转自http://blog.csdn.net/coldsnow33/article/details/16808161void EventHub::loadConfigurationLocked(Device* device) { device->configurationFile = getInputDeviceConfigurationFilePathByDeviceIdent_no input device configuration file found for device

.net 修改AD域中的密码-程序员宅基地

文章浏览阅读709次。1.通过vs 2013 新建一个web站点(不是空项目),这个会带一下模板,2.然后新建一个页面UpdatePassWord.aspxaspx页面内容:<%@ Page Title="UpdatePassWord" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup..._asp,net 修改 ad 密码

用 Python 下载抖音无水印视频_python 通过抖音链接下载无水印视频 怎么实现-程序员宅基地

文章浏览阅读346次。说起抖音,大家或多或少应该都接触过,如果大家在上面下载过视频,一定知道我们下载的视频是带有水印的,那么我们有什么方式下载不带水印的视频呢?其实用 Python 就可以做到,下面我们来看一下。很多人学习python,不知道从何学起。很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。很多已经做案例的人,却不知道如何去学习更加高深的知识。那么针对这三类人,我给大家提供一个好的学习平台,免费领取视频教程,电子书籍,以及课程的源代码!QQ群:1097524789首先,我们打开抖.._python 通过抖音链接下载无水印视频 怎么实现

随便推点

(转载)几张图看懂列式存储-程序员宅基地

文章浏览阅读59次。原文地址:http://www.cnblogs.com/bendantuohai/p/4602414.html几张图看懂列式存储目录为什么要按列存储2补充数据压缩3查询执行性能最近看到一篇很好资料,里面三言两语配上几个图就把列式存储(Column-based Storage)讲明白了,牛啊!最喜欢的就是这种浅显易懂就把背景知识讲得..._columnar or column-based

python从入门到实战django_Python Web开发从入门到实战(Django+Bootstrap微课视频版)-程序员宅基地

文章浏览阅读1.5k次。部分基础知识篇章Python Web环境搭建1.1Python Web概述1.1.1Python语言简介1.1.2Python Web的优势1.2安装Python1.3安装开发工具VS Code1.3.1VS Code下载和安装1.3.2VS Code基本配置1.3.3编写和运行Python脚本1.4个Python Web程序1.4.1Django安装1.4.2创建Django项目1.4.3创建应..._pythonweb开发从入门到实战微课视频版

mac下xampp的mysql无法自动启动-程序员宅基地

文章浏览阅读127次。mac下xampp的mysql无法自动启动,每次启动都要手动在终端里执行sudo /Applications/XAMPP/xamppfiles/bin/mysql.server start自动启动解决办法如下:1、打开/Applications/XAMPP/xamppfiles/xampp进行编辑2、找到这一行:$XAMPP_ROOT/bin/mysql.server st..._/opt/lampp/proftpd/scripts/ctl.sh:行 49: 24074 段错误

JS混淆加密工具-程序员宅基地

文章浏览阅读67次。http://www.moralsoft.com/jso-online/hdojso.htm转载于:https://www.cnblogs.com/starweb/archive/2012/05/28/2522817.html_js 混淆加密工具csdn

Qt ------ 截图、获取鼠标指定的RGB值-程序员宅基地

文章浏览阅读1k次。获取RGB值思路:截图,获取图片的(0,0)的RGB值 int x = QCursor::pos().x(); int y = QCursor::pos().y(); // QPixmap pixmap = QPixmap::grabWindow(QApplication::desktop()->winId(), x, y, 1, 1);..._qcursor.pos().x()

华为快应用在setInterval中绘制canvas动画卡顿,怎么破_华为快应用怎么能不卡-程序员宅基地

文章浏览阅读1.8k次。现象描述:快应用中通过setinterval周期函数来循环触发canvas绘制代码,在华为手机上绘制的动画会很卡顿,不流畅。问题代码如下:click0() { this.speed = 0.3 let ctx = this.$element('canvas').getContext('2d') setInterval(() => { this.num0 += 2 this.noise = Math.min(0.5, 1) * t_华为快应用怎么能不卡

推荐文章

热门文章

相关标签