获取高德App Key

9 f3 Y/ _8 D( _! [9 ]$ E: W9 e# p) V5 F: U0 J3 u

为了使用高德 SDK，你需要准备高德 App Key，获取方法参考高德地图 SDK 官方文档：

# r3 ]2 M6 b. l9 k0 Q, K. e获取Android App Key; d* q: H, d1 w% @9 o

* L; c/ l/ Q1 f4 h- e% }- o1 v1、创建新应用

" z& N. X+ H4 ^1 d/ V进入高德地图控制台，创建一个新应用。如果您之前已经创建过应用，可直接跳过这个步骤。) T7 _& A0 W3   T$ i( J

8 A( a, p+ [, |- I( z

" f- A' u; p* F4 ?3 r

G1 q  r# ]3 t7 m( M! [/ E2 S2、添加新Key

0 L. J4 B, D' Z3 c- F在创建的应用上点击"添加"按钮，在弹出的对话框中，依次：输入应用名名称，选择绑定的服务为“Android平台SDK”，输入发布版安全码  SHA1、调试版安全码 SHA1、以及 Package，如下图所示：

" g: j" ~6 }2 d需要注意的是： 1个KEY只能用于一个应用(多渠道安装包属于多个应用)，1个Key在多个应用上使用会出现服务调用失败。

3 P* S! o/ [0 }$ ^6 Q) W/ u3 D4 c1 E- U, M% q

$ G7 S% D: p; I在阅读完高德地图API服务条款后，勾选此选项，点击“提交”，完成 Key 的申请，此时您可以在所创建的应用下面看到刚申请的 Key 了。* J  J) w# Y' l. Z8 Z

如何获取 SHA1* W' b5 f, I$ w# ?) h( {

7 k# S* R/ n& Y. `调试版本(debug)和发布版本(release)下的 SHA1 值是不同的，发布 apk 时需要根据发布 apk 对应的 keystore 重新配置 Key。

) T+ c9 I# y. x* R$ F. a% p以下介绍使用Android Studio来获取对应的SHA1：: Z* r; ~/ r6 _3 Z$ G

第一步、打开 Android Studio 的 Terminal 工具。

8 B, o2 J; q: N; E6 P第二步、输入命令：keytool -v -list -keystore  keystore 文件路径。8 a* ~3 X( z/ A, G( J: n! B

第三步、输入 Keystore 密码3 M+ q, u6 {" O+ F; ]( R6 ]

+ |- h. C. c" `3 j- T( I' b9 O

如何获取 PackageName

}8 V( h0 T' t% G: G' V  r3 A6 M* d$ }. i& Z& G

Android Studio 可以通过 applicationId 配置包名，如果配置了 build.gradle 文件，PackageName 应该以 applicaionId 为准，防止 build.gradle 中的 applicationId 与 AndroidMainfest.xml 中的 PackageName 不同，导致 key 鉴权不过。

, R  B6 _- A4 T" d6 c$ W8 }/ D8 N

* S. f" B# p8 a8 F7 h" N3 c, P# L

9 `, t) G) c% Y& |4 U. D

提交后即可生成Android App Key：

6 Z" O9 U5 f+ b  ^5 E1 T% N- C. _3 b  S0 e8 e( [0 Y0 Y

开始使用

( x1 A0 L( v  j( M# k+ Q1 f. e- W0 a. m" ?2 W: [) M7 G; F

安装

! A0 J. f6 D9 {) O5 m+ w9 Z/ F8 `

. r$ |/ {0 g, X* U) Xyarn add react-native-amap-geolocation或npm install react-native-amap-geolocation --save自动配置(推荐)9 Z& V2 q# [. S1 G" f

+ U9 J7 _# n2 S7 R+ M

react-native link react-native-amap-geolocation手动配置

q5 k% J7 H0 S- b$ y- C0 u! g3 f3 V3 y1 D* _% A

一般情况下 react-native link 即可完成配置，如果因特殊原因无法使用 react-native link 或 link 失败，则可参照以下步骤检查并进行手动配置。1 j  i$ c1 X& F1 j5 l2 h  P

Android端

( `4 l  }2 W$ a3 Y! Q! k, I2 B0 m- ^0 t  ]

1.编辑 android/settings.gradle，设置项目路径：

- M# f) l/ a9 _/ u% K5 jinclude ':react-native-amap-geolocation'project(':react-native-amap-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-geolocation/lib/android')2.编辑 android/app/build.gradle，新增依赖：

8 Y$ Z0 I* @, c$ `6 l5 o4 p' @dependencies {   implementation project(':react-native-amap-geolocation')}3.编辑 MainApplication.java：

8 b4 f- B, V8 d$ Q% W! Cimport cn.qiuxiang.react.geolocation.AMapGeolocationPackage;public class MainApplication extends Application implements ReactApplication {  @Override  protected List getPackages() {         List packages = new PackageList(this).getPackages();         packages.add(new AMapGeolocationPackage());         return packages;  }}iOS端+ j% B( y7 A: B9 V$ q6 C. H& R

6 & v+ W5 C/ C" j/ ]6 m- J6 j待续。。。。。。。。。。。. J) |7 P& ]- L) ~1 y7 N

基本用法) t: H% D- I'   F9 t9 x! ]

) S9 p6 K2 H! F" wimport { PermissionsAndroid } from "react-native";import { init, Geolocation ,setLocatingWithReGeocode} from "react-native-amap-geolocation";  async componentDidMount() {        if (Platform.OS === "android") {            await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION);        }else{            setLocatingWithReGeocode(true)        }        await init({            ios: "9bd6c82e77583020a73ef35f59d0c759",            android: "dd25bc60566f854254f77a4bfa4f9b55"        });        this.getCurrentPosition()    }getCurrentPosition = () => {        Geolocation.getCurrentPosition(            position => this.updateLocationState(position),            error => this.updateLocationState(error)        );    };    updateLocationState(location) {        if (location) {            location.updateTime = new Date().toLocaleString();            let data = location.location            this.setState({                provinceName: data.province,                cityName: data.city,                areaName: data.district,            });        }    }回调数据：

$ S( {) |/ C) U

+ w! k) v* s# D' a$ _

更多用法9 M' f! `1 _* h

- c+ V) m4 M, H+ J! v  @该项目除了提供符合 Web 标准的 Geolocation API，同时为了最大程度的发挥高德定位 SDK 的功能， 会尽可能提供与原生 SDK 一致的接口封装。由于 iOS 和 Android SDK 提供的接口并不一致， 于是最终实现的接口大部分是并不通用的。这在接口文档或文档注释有注明， 比如 @platform android 表示该接口仅用于 Android。* k7 D1 N9 X. ~- q; S

以下是一些常用接口的用法说明以及示例代码，更多接口的具体用法请参考[接口文档]

4 ; p& s- Y  b0 {/ ]  ]直接使用原生接口& X- f9 G( x2 ^- w- l) r

. X/ k* R  G4

import { init, addLocationListener, start, stop } from "react-native-amap-geolocation";// 添加定位监听函数addLocationListener(location => console.log(location));// 开始连续定位start();// 在不需要的时候停止定位stop();逆地理编码

/ R2 e# O5 |9 [" b. H) }, U' c$ e# v1 v% q

Android 默认返回逆地理编码，而 iOS 需要手动设置。

6 Y, I% Q5 c; Y0 S" _import { setLocatingWithReGeocode, setNeedAddress } from "react-native-amap-geolocation";// androidsetNeedAddress(true);// iossetLocatingWithReGeocode(true);定位回调频率限

: C8 ~" d4 {# T) P+ z2 V% [

9 g6 a' X& E: {: C, v4 Oimport { setInterval, setDistanceFilter } from "react-native-amap-geolocation";// android，5 秒请求一次定位setInterval(5000);// ios，设备移动超过 10 米才会更新位置信息setDistanceFilter(10);

- `" j  q+ ( y3 f! z1 C6 U3 }Java吧 收集整理 java论坛 www.java8.com