npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@spatacus/react-native-amap-sdk

v2.0.6

Published

React Native AMap component for iOS + Android +Web

Downloads

18

Readme

RNAMapLocation 此分支为2D地图的分支,3D地图见 master3d 分支

高德api封装使用ReactNative结构,包含定位,地图,地图标注,地理编码,逆地理编码,poi兴趣点,导航等功能

amap 的文档参考https://github.com/qiuxiang/react-native-amap3d, 改了 mapview 组件的一些东西,修改后的内容参考demo

Version

** v 2.0.5 **

安装

  • 添加npm依赖

package.json的depencency中添加:

  "@spatacus/react-native-amap-sdk": "2.0.6"
或者

npm install @spatacus/react-native-amap-sdk --save

yarn add @spatacus/react-native-amap-sdk
  • 项目导入

1.iOS 建议使用cocoapods依赖方式, Podfile文件添加如下

  pod 'react-native-amap-sdk/LocationAmap', :path => '../node_modules/@spatacus/react-native-amap-sdk/ios'
  pod 'react-native-amap-sdk/Map3dAmap', :path => '../node_modules/@spatacus/react-native-amap-sdk/ios'

然后执行 pod upodate 方法

2.安卓集成

在settings.gradle 文件中加入如下

// 只有poi 和 获取 定位坐标信息的, 没有地图组件
include ':react-native-amap-sdk'
project(':react-native-amap-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/@spatacus/react-native-amap-sdk/android/locationamap')

// 只有地图相关控件(如mark,折线,多边围栏等)
include ':react-native-3damap-sdk'
project(':react-native-3damap-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/@spatacus/react-native-amap-sdk/android/map3damap')

在application的app模块下的build.gradle 中添加如下

  compile project(":react-native-amap-sdk")
  compile project(":react-native-3damap-sdk")

在MainApplication的代码中加入如下


  import cn.qiuxiang.react.amap3d.AMap3DPackage;
  import io.spatacus.rnamap.AMapReactPackage;

  ......

 @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
          ......
          new AMapReactPackage(),
            new AMap3DPackage()
          ......
    );
  }
};
  • 应用权限配置

在iOS应用info.plist中添加如下配置

  <key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>
  <key>NSLocationWhenInUseUsageDescription</key>
	<string>需要使用您的定位信息</string>
  • 高德AppKey配置

iOS工程配置

AppDelegate类-[AppDelegate application:didFinishLaunchingWithOptions:]方法中添加如下行


  #import "RNAMConfig.h"

  ......
  -[AppDelegate application:didFinishLaunchingWithOptions:]
  ......

  [RNAMConfig setAppKey: @"请输入您的用户Key"];
  ......

Android工程配置

Manifest文件中添加如下行

<meta-data android:name="com.amap.api.v2.apikey" android:value="请输入您的用户Key"/>

使用

定位模块

  1. 获取当前那位置

** 使用说明 **

import {fetchLocation} from '@spatacus/react-native-amap-sdk';

···
 fetchLocation((lp, error) => {
      if (error) {
        console.log('location', error.code, error.message)
        return
      }
      // 定位成功 根据定位信息做相关处理
     
    
    });

** 参数说明 **

lp :相关当前定位信息,包含data和requestId,其中,data中即包含当前定位信息,如下所示:

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| |latitude| gps坐标信息 |string | | longitude |gps坐标信息 | string | | formattedAddress |格式化地址| string | | country |国家| string | | province |省/直辖市| string | | city |市| string | | district |区| string | | citycode |城市编码| string | | adcode |区域编码| string | | street |街道名称| string | | number |门牌号| string | | POIName |兴趣点名称| string | | AOIName |所属兴趣点名称| string | | pois |poi列表| object |

地图模块

** 使用说明 **

amap 的文档参考https://github.com/qiuxiang/react-native-amap3d, 改了 mapview 组件的一些东西,修改后的内容参考demo

地图功能模块

  1. 地理编码

** 使用说明 **

 import {AMapGeocode} from '@spatacus/react-native-amap-sdk';

...
// 根据地址和城市信息进行地理编码
AMapGeocode(address,city).then((data)=>{
      const geocode = data.list[0];
      // 获取到位置信息
      this.setState({
        geocodeResult : `${geocode.latitude},${geocode.longitude}`
      })
    })

** 参数说明 **

结果返回为

data:list(array类型)

其中:list数组中返回的就是相关地理编码信息, list中的返回对象参数信息如下:

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| |latitude| gps坐标信息 |string | | longitude |gps坐标信息 | string | | formattedAddress |格式化地址| string | | country |国家| string | | province |省/直辖市| string | | city |市| string | | district |区| string | | citycode |城市编码| string | | adcode |区域编码| string | | street |街道名称| string | | number |门牌号| string | | POIName |兴趣点名称| string | | AOIName |所属兴趣点名称| string | | pois |poi列表| object |

  1. 逆地理编码

** 使用说明 ** 根据经纬度进行逆地理编码

import {AMapReGeocode} from '@spatacus/react-native-amap-sdk';
...
  const latitude = '30.179339'  
  const longitude =  '120.14156'

    AMapReGeocode(latitude,longitude).then((data)=>{
    // 获取当前位置信息
    })

** 参数说明 ** 返回的data即是当前位置信息,详细说明见定位模块中的定位信息列表。

  1. poi数据

** 使用说明 **

import { AMapPOISearchPage,AMapPOISearch
 } from '@spatacus/react-native-amap-sdk';

 ...
 
 // poi搜索
 AMapPOISearch(keywords,city,).then((data) =>{
      if(data.pois){
       
        })
      }
    });

 // poi搜索 (设定搜索页)
 AMapPOISearchPage(keywords,city,pageNum,pageSize).then((data) =>{
      if(data.pois){
      
        })
      }
    });

** 参数说明 **

  • 传入参数

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| |keywords| poi关键字 |string | | city |限定城市(cityName/cityCode/adcode) |string | | pageNum |限定页数| string | | pageSize |每页记录数| string |

  • 搜索结果

返回结果如下所示:

data:{
count:0,// poi总数量
pois:[],// poi数据列表
suggestions:[] // 关键字建议列表和城市建议列表
}

其中,pois数组中就是所需要的poi数据信息,poi数据中可能的参数信息如下:

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| |uid | POI全局唯一ID | string| |name| 名称 |string | |type|兴趣点类型 |string | |typecode| 类型编码 |string | |location| 经纬度 |string | |address|地址 |string | |tel|电话 |string | |distance|距离 |string | |parkingType| 停车场类型|string | |shopID| 商铺id |string | |postcode| 邮编 |string | |website| 网址 |string | |email| 电子邮件 |string | |province| 省 |string | |pcode| 省编码 |string | |city| 城市名称 |string | |citycode| 城市编码 |string | |district| 区域名称 |string | |adcode| 区域编码 |string | |gridcode| 地理格ID |string | |enterLocation| 入口经纬度 |string | |exitLocation| 出口经纬度 |string | |direction| 方向 |string | |hasIndoorMap| 是否有室内地图 |bool | |businessArea| 所在商圈 |string | |indoorData| 室内信息 |string | |subPOIs| 子POI列表 |array | |images| 图片列表 |array |

导航功能模块

** 使用说明 **

支持使用高德地图导航,iOS可选自带地图导航

import {mapNavigation} from '@spatacus/react-native-amap-sdk';

...

mapNavigation(
{sname:'我的位置',
slat:30.179415,
slon:120.138031,
dname:'云栖小镇',
dlat:30.132344,
dlon:120.083468}
)

** 参数说明 **

导航参数配置说明

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| |sname| 初始位置描述 |string | | slat |出发地gps信息 |string | | slon |出发地gps信息| string | | dname |目的地描述| string | | dlat |目的地gps信息| string | | dlon |目的地gps信息| string |

web使用

支持使用高德地图web获取当前位置

import { setAmapKey, fetchLocation } from '@spatacus/react-native-amap-sdk';

setAmapKey('xxxx', 'AMap.Geocoder') // 如果没有引入地图script,则必须先设置 地图的key

fetchLocation((lp, error) => {
  if (error) {
    console.log('location', error.code, error.message)
    return
  }
  // 定位成功 根据定位信息做相关处理
  
});

** 参数说明 **

lp :相关当前定位信息,与react-native的相关参数并不完全一致, data中即包含当前定位信息,缺失的信息如下所示:

| 参数名 | 描述 | 类型 | |:-------------: |:-------------: |:-----:| | country |国家| string | | POIName |兴趣点名称| string | | AOIName |所属兴趣点名称| string |

mapview模块

功能

  • 地图模式切换(常规、卫星、导航、夜间)
  • 3D 建筑、路况、室内地图
  • 内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
  • 手势交互控制(平移、缩放、旋转、倾斜)
  • 中心坐标、缩放级别、倾斜度的设置,支持动画过渡
  • 地图事件(onPress、onLongPress、onLocation、onStatusChange)
  • 地图标记(Marker)
    • 自定义信息窗体
    • 自定义图标
  • 折线绘制(Polyline)
  • 多边形绘制(Polygon)
  • 圆形绘制(Circle)
  • 热力图(HeatMap)
  • 海量点(MultiPoint)
  • 离线地图

用法

导入地图模块

import { MapView } from  '@spatacus/react-native-amap-sdk';

基本用法

<MapView
  coordinate={{
    latitude: 39.91095,
    longitude: 116.37296,
  }}
/>

启用定位并监听定位事件

<MapView
  locationEnabled
  onLocation={({ nativeEvent }) =>
    console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>

添加可拖拽的地图标记

<MapView>
  <MapView.Marker
    draggable
    title='这是一个可拖拽的标记'
    onDragEnd={({ nativeEvent }) =>
      console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
    coordinate={{
      latitude: 39.91095,
      longitude: 116.37296,
    }}
  />
</MapView>

自定义标记图片及信息窗体

const coordinate = {
  latitude: 39.706901,
  longitude: 116.397972,
}

<MapView.Marker image='flag' coordinate={coordinate}>
  <View style={styles.customInfoWindow}>
    <Text>自定义信息窗体</Text>
  </View>
</MapView.Marker>

接口

请参考注释文档:

  • MapView 位置: app/amap3d/maps/MapView.js
  • Marker 位置: app/amap3d/maps/Marker.js
  • Polyline 位置: app/amap3d/maps/Polyline.js
  • Polygon 位置: app/amap3d/maps/Polygon.js
  • Circle 位置: app/amap3d/maps/Circle.js
  • HeatMap 位置: app/amap3d/maps/HeatMap.js
  • MultiPoint 位置: app/amap3d/maps/MultiPoint.js

更改react-native.config.js

module.exports = {
dependencies: {
  '@spatacus/react-native-amap-sdk': {
    platforms: {
      android: null
    },
  },
}