关于DMM实现定位功能(二)—react-native-amap3d的配置简单使用

今天介绍react-native-amap3d的使用,首先官方文档落了很久的定位功能,现在开始动手了,是唤起地图的详情,它的功能如下

地图模式切换（常规、卫星、导航、夜间）
3D 建筑、路况、室内地图
内置地图控件的显示隐藏（指南针、比例尺、定位按钮、缩放按钮）
手势交互控制（平移、缩放、旋转、倾斜）
中心坐标、缩放级别、倾斜度的设置，支持动画过渡
地图事件（onPress、onLongPress、onLocation、onStatusChange）
地图标记（Marker）

自定义信息窗体

自定义图标
折线绘制（Polyline）
多边形绘制（Polygon）
圆形绘制（Circle）
热力图（HeatMap）
海量点（MultiPoint）
离线地图

这是它的接口文档

1》安装 yarn add react-native-amap3d (这是我习惯的安装方式)

2》配置:

a. Android配置:编辑 Android 项目的 AndroidManifest.xml（在 android\app\src\main\AndroidManifest.xml）

例子:

<application><meta-dataandroid:name="com.amap.api.v2.apikey"android:value="你的高德 Key" />
</application>

b.ios配置:在 AppDelegate.m 里引入 SDK 头文件 #import <AMapFoundationKit/AMapFoundationKit.h>，并设置高德 Key [AMapServices sharedServices].apiKey = @"你的高德 Key";

如何获取key在上一篇已经介绍过了

3》例子:

a.导入

import { MapView } from 'react-native-amap3d';

b.MapView的具体使用

<View style={{ flex: 1, width: '100%', height: '100%'}}><MapViewstyle={StyleSheet.absoluteFill}zoomLevel={18} //缩放级别tilt={45} //倾斜度showsIndoorMap// mapType="satellite"locationInterval={10000} //定位间隔(ms)，默认 2000distanceFilter={10} //定位的最小更新距离locationEnabled={true} //开启定位showslocationbutton={true}showsCompass={true}showsscale={true}showsTraffic={true}region={{latitude: 28.128570904591175,longitude: 113.00188102075148,latitudeDelta: 0.1,longitudeDelta: 0.1,}}//region显示区域/></View>

显示:![1603440538000image.png ](http://cos.haxibiao.com/images/5f928f995d790.png

提醒:上面的latitude,longitude是我暂时用固定的经纬度来确定的,一般定位会到这里,如何获取经纬度,我会在后面详细说明;

region={{latitude: 28.128570904591175,longitude: 113.00188102075148,latitudeDelta: 0.1,longitudeDelta: 0.1,}}

4》注意:在Android里面,其中mapType这个字段会产生错误,暂时没有找到解决办法,错误如下

Failed prop type: Invalid prop mapType of type string supplied to MapView, expected number.

下一篇介绍MapView与react-native-amap-geolocation`的具体使用,获取经纬度

关于DMM实现定位功能(二)—react-native-amap3d的配置简单使用相关推荐

reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法.主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了 ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
为什么我切换到React Native来创建超级简单的底页
I recently switched jobs, and one of my first tasks was to create a bottom sheet in React Native. 我最 ...
深入浅出React Native 1: 环境配置
该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
React Native开发环境配置检测
安装依赖: 必须安装的依赖有:Node.Yarn, JDK 和 Android Studio. 安装过程中,请务必保持一颗良好的心态 1. 基础环境搭建 : Node: 安装参考连接:https:// ...
reactnative 获取定位_[RN] React Native 获取地理位置
import React, {Component} from 'react'; import {StyleSheet, Text, View}from 'react-native'; exportde ...
react Native 环境安装配置——图解版一目了然
✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下
最火移动端跨平台方案盘点：React Native、weex、Flutter
本文原文由"恋猫月亮"原创发布,原题为<移动端跨平台开发的深度解析>,本次重新整理后,为了优化阅读体验,内容略有改动,感谢原作者的无私分享. 1.前言跨平台一直是老生 ...
Microsoft将在UWP上支持React Native，同时为VS Code添加工具软件
Microsoft和Facebook日前宣布React Native的下一个目标平台是Universal Windows Platform(UWP). 对于已经在多个设备平台上使用React Nati ...
React Native Styling：样式化的组件，Flexbox布局等
React Native provides an API for creating stylesheets and styling your components: StyleSheet. React ...

关于DMM实现定位功能(二)—react-native-amap3d的配置简单使用

关于DMM实现定位功能(二)—react-native-amap3d的配置简单使用相关推荐

最新文章

热门文章