react-native-isz-amap

react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，受 react-native-maps 启发，提供功能丰富且易用的接口。

功能

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

安装

安装依赖

yarn add react-native-isz-amap

项目配置

Android

react-native link react-native-isz-amap

iOS

你需要使用 CocoaPods，在 ios 目录下新建文件 Podfile：

platform :ios, '9.0'
 
# The target name is most likely the name of your project. 
target 'Your Target' do
  # Your 'node_modules' directory is probably in the root of your project, 
  # but if not, adjust the `:path` accordingly 
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47 
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging 
    # Add any other subspecs you want to use in your project 
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0 
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
 
  # Third party deps podspec link 
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
  pod 'react-native-isz-amap', path: '../node_modules/react-native-isz-amap/lib/ios'
end
 
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

然后运行：

pod install

添加高德 Key

Android

1. 获取高德 Key。

2. 编辑 Android 项目的 AndroidManifest.xml（一般在 android\app\src\main\AndroidManifest.xml），添加如下代码：

   <application>
     <meta-data
       android: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-isz-amap'

基本用法

<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>

poi

api

/**
 * 获取poi
 * @param data
 * @param data.longitude {Double}  经度，必填
 * @param data.latitude {Double} 纬度 必填
 * @param data.keyWord {String}  搜索关键词，必填
 * @param data.radius {int}  搜索半径，选填，默认1000
 * @param data.pageSize {int} 查询数量 ，选填默认20
 * @param data.pageNum {int} 查询页数 ，选填默认1
 *
 * @returns {Promise<any>}
 */
LocationApi.getNearbyPoi()

使用

LocationApi.getNearbyPoi({
              longitude: 120.139,
              latitude: 30.18455,
              pageSize: 20,
              pageNum: 1,
              keyWord: '学校',
              radius: 10000,
            }).then((res) => {
              console.log(JSON.stringify(res))
            }).catch(err => {})

返回数据格式
{
    "pois":[
        {
            "longitude":120.153622,
            "cityCode":"0571",
            "provinceName":"浙江省",
            "adName":"滨江区",
            "provinceCode":"330000",
            "cityName":"杭州市",
            "adCode":"330108",
            "latitude":30.172972,
            "title":"浙江华川专修学院(西区)"
        }
    ],
    "msg":"成功",
    "errCode":0
}

定位

api使用

  LocationApi.locate().then((res) => {
              console.log(JSON.stringify(res))
            }).catch(err => {})

返回数据格式

{
    "street":"六和路", //street街道
    "time":"2018-12-05 14:13:27",//定位时间
    "latitude":30.184853, //纬度
    locationType： //定位类型（参考https://lbs.amap.com/api/android-location-sdk/guide/utilities/location-type/）
    "province":"浙江省",//省份
    "accuracy":41, //定位精度  单位m
    "address":"浙江省杭州市滨江区六和路靠近海外高层次人才创新创业基地", //定位地址
    "adCode":"330108", //地区编码
    "longitude":120.139638, //精度
    "country":"中国", //国家
    "district":"滨江区", //区域
    "city":"杭州市", //城市
    locationErrorCode:0//定位错误码（错误码对照表https://lbs.amap.com/api/android-location-sdk/guide/utilities/errorcode/）
    "streetNum":"348号", //街道号
    "cityCode":"0571" //城市码
}

地址解析

 LocationApi.geoCode({ city: '杭州市', address: '滨江区海创基地' }).then((res) => {
              console.log(1111)
              this.setState({ location: JSON.stringify(res) })
            }).catch((err) => {
              console.log(JSON.stringify(err))
              this.setState({ location: JSON.stringify(err) })
            })
 返回：
 {longitude: 120.138404, latitude: 30.187004, errCode: 0}

逆地址解析

 LocationApi.geoCode({ city: '杭州市', address: '滨江区海创基地' }).then((res) => {
              console.log(1111)
              this.setState({ location: JSON.stringify(res) })
            }).catch((err) => {
              console.log(JSON.stringify(err))
              this.setState({ location: JSON.stringify(err) })
            })
  返回数据：
  {
      "adCode":"330108",
      "city":"杭州市",
      "cityCode":"0571",
      "district":"滨江区",
      "errCode":0,
      "address":"浙江省杭州市滨江区浦沿街道六和路346号海外高层次人才创新创业基地",
      "province":"浙江省"
  }
  

更多示例

参考 examples。

Android

yarn run-android

iOS

cd ios && pod install && cd ..
yarn run-ios

接口

请参考注释文档：

• MapView
• Marker
• Polyline
• Polygon
• Circle
• HeatMap
• MultiPoint

npm

https://www.npmjs.com/package/react-native-isz-amap