高德地图第三方组件应用
一 高德react-native-amap3d组件的使用。
react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。
主要功能:
地图模式切换(常规、卫星、导航、夜间)
3D 建筑、路况、室内地图
内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
手势交互控制(平移、缩放、旋转、倾斜)
中心坐标、缩放级别、倾斜度的设置,支持动画过渡
地图事件(onPress、onLongPress、onLocation、onStatusChange)
地图标记(Marker)
自定义信息窗体
自定义图标
折线绘制(Polyline)
多边形绘制(Polygon)
圆形绘制(Circle)
热力图(HeatMap)
海量点(MultiPoint)
导航(驾车、步行、骑行)(待完善 :construction:)
离线地图
基本功能图形如下:
第一步:安装
安装依赖
$ npm i react-native-amap3d
项目配置
Android
$ react-native link react-native-amap3d
iOS
推荐使用 CocoaPods,需要注意 iOS 项目不要 react-native link react-native-amap3d
, 不然会引入错误的依赖,导致编译失败。在 ios
目录下新建文件 Podfile
:
platform :ios, '8.0'target 'Your Target' dopod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'pod 'React', path: '../node_modules/react-native/', :subspecs => ['CxxBridge',]pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/ios/'
end
然后运行:
$ pod install
如果你不想使用 CocoaPods,手动配置请参考: 手动部署 。
添加高德 Key
Android
1、 获取高德 Key 。
2、编辑 Android 项目的 AndroidManifest.xml
(一般在 android\app\src\main\AndroidManifest.xml
),添加如下代码:
<application><!-- 确保 meta-data 是直属 application 的子标签 --><meta-dataandroid:name="com.amap.api.v2.apikey"android:value="你的高德 Key"/>
</application>
iOS
1、 获取高德 Key 。
2、 在 AppDelegate.m
里引入 SDK 头文件 #import <AMapFoundationKit/AMapFoundationKit.h>
, 并设置高德 Key [AMapServices sharedServices].apiKey = @"你的高德 Key";
。
基本用法
import {MapView} from 'react-native-amap3d';
return <MapView style={StyleSheet.absoluteFill}/>
导入地图模块
import {MapView, Marker, Polyline} from 'react-native-amap3d'
<MapView><Marker .../>
</MapView>
或者
import MapView from 'react-native-amap3d'
<MapView><MapView.Marker .../>
</MapView>
基本用法
<MapView coordinate={{latitude: 39.91095,longitude: 116.37296,
}}/>
启用定位并监听定位事件
<MapViewlocationEnabledonLocation={({nativeEvent}) =>console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>
添加可拖拽的地图标记
<MapView><Markerdraggabletitle='这是一个可拖拽的标记'onDragEnd={({nativeEvent}) =>console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}coordinate={{latitude: 39.91095,longitude: 116.37296,}}/>
</MapView>
自定义标记图片及信息窗体点击打开链接
<Markerimage='flag'coordinate={{latitude: 39.706901,longitude: 116.397972,}}
><View style={styles.customInfoWindow}><Text>自定义信息窗体</Text></View>
</Marker>
接口
请参考注释文档:MapView
Marker
Polyline
Polygon
Circle
HeatMap
MultiPoint
二 如何申请Key
2.1 申请组测成为开发者
官方地址:https://lbs.amap.com/api/android-sdk/guide/create-project/get-key
这一步应该不用怎么说吧,大家自己都会注册账号密码什么的。
2.2 申请应用key
①首先点开控制台,点击应用管理:
②点击右上角创建应用:
③点击右上角添加新Key
在创建的应用上点击"添加新Key"按钮,在弹出的对话框中,依次输入应用名名称,选择绑定的服务为“Android平台SDK”,输入发布版安全码 SHA1、调试版安全码 SHA1、以及 Package,如下图所示:
需要注意的是: 1个KEY只能用于一个应用(多渠道安装包属于多个应用),1个Key在多个应用上使用会出现服务调用失败。
我们只说一下获取这两个安全码SHA1:
- 调试版:我们打开Android Studio,点击gradle projects(默认在右侧),app->Tasks->android->signingReport。
发布版:通过Android Studio获取开发者SHA1:
- 1.打开Android Studio的Terminal工具。
- 2、输入命令:keytool -v -list -keystore keystore文件路径。
- 3、输入Keystore密码。
- 获取包名
在AndroidManifest.xml中自己就可以查找
2.3 添加高德地图key
<meta-dataandroid:name="com.amap.api.v2.apikey"android:value="d6d037664d079ef56b564fa8f11becf2"/>
更具体的内容去官网看
https://lbs.amap.com/api/android-sdk/guide/create-project/get-key
高德地图第三方组件应用相关推荐
- amap vueamap 与_vue 使用高德地图vue-amap组件过程解析
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S ...
- Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...
- vue/react高德地图选点组件(坐标拾取工具)
一些项目会常用到这个功能,把自己做的组件分享一下,vue版和react版都有 vue版 github地址 (vue3) react版 github地址 效果 安装 vue: npm install v ...
- java调用导航_android 调用百度地图,高德地图第三方APP进行导航
以前都是使用百度API在软件里面做一个百度地图出来这样感觉既浪费时间又浪费精力,这里就教大家直接使用Intent的方式调用手机上安装的百度地图客户端,访问我们所需要的路径规划等,//调起百度地图客户端 ...
- 高德地图第三方工具网站
1.查询经纬度网站 https://api.map.baidu.com/lbsapi/getpoint/index.html //添加矢量图形var marker = new AMap.Marker( ...
- vue高德地图(amap-jsapi-loader)页面与组件使用(AMapUI 组件库)
AMapUI 组件库:https://lbs.amap.com/api/amap-ui/intro 引入amap-jsapi-loader:https://blog.csdn.net/qq_32707 ...
- RN导入高德地图定位的用法实例
转载自:[译]React Native开源高德地图定位组件(react-native-amap-location) -江清清的技术专栏 1.NPM install 1 npm install relo ...
- react 逆地理 高德地图_react高德地图默认卫星图设置
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 react高德地图的话组件可以会有些缺失,所以我们需要参考官网的Geocoder 的引入做参考,目前突然说需要高德地图默认卫星,react-amap,压根 ...
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
最新文章
- java读取ACCESS数据库的简单示例
- python database is locked_sqlite遇到database is locked问题的完美解决
- 3D游戏引擎设计 实时计算机图形学的应用方法 第2版 pdf 带索引书签目录
- Pl/SQL Developer 配置
- oc61--block
- Spring Boot + JPA + Oracle 自增长字段实现示例
- MATLAB优化编码
- win10下搭建QTP测试环境
- color ui的使用
- python中if brthon环境安装包_python-debian/test.deb.uu at master · romlok/python-debian · GitHub...
- coap协议详解 服务器,COAP协议解析和简单打包实现
- 图形面积计算Java,Java计算几何图形面积的实例代码
- mybatis批量删除 java_Mybatis批量删除数据操作方法
- CircleImageView用法及源码解析(雷惊风)
- 斯坦福编程方法学作业讲解3---Karel机器人三大定律(上)
- Win11 25188.1000补丁包介绍及下载地址
- ubuntu 18.04 netplan 配置多网卡、多路由、多ip
- #MySQL#查找表中重复条目、删除重复条目
- 用Python实现斗地主游戏(终端版)
- 利用R语言制作好看的Meta分析文献偏倚风险图