react-native使用高德地图

# react-native-amap3d, 官网: https://github.com/qiuxiang/react-native-amap3d

> [`React Native 高德地图组件的使用（react-native-amap3d）`](https://blog.csdn.net/sinat_17775997/article/details/77847371)

## 安装依赖
> npm i react-native-amap3d -S
## 项目配置
### Android
> react-native link react-native-amap3d

### 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-amap3d', path: '../node_modules/react-native-amap3d/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
```
注意：不同的 RN 版本，Podfile 可能需要稍作调整，具体参考 https://facebook.github.io/react-native/docs/integration-with-existing-apps#configuring-cocoapods-dependencies 。

然后运行：
> pod install

****
## 添加高德 Key
### Android
1. [获取高德 Key](http://lbs.amap.com/api/android-sdk/guide/create-project/get-key)
2. 编辑 Android 项目的 AndroidManifest.xml（一般在 android\app\src\main\AndroidManifest.xml），添加如下代码：
```

```
### ios
1. [获取高德 Key](http://lbs.amap.com/api/android-sdk/guide/create-project/get-key)
2. 在 `AppDelegate.m` 里引入 SDK 头文件 `#import `， 并设置高德 Key `[AMapServices sharedServices].apiKey = @"你的高德 Key";`。

****

## 用法
### 导入地图模块
> import { MapView } from 'react-native-amap3d'
### 基本用法
```

```
### 启用定位并监听定位事件
```

console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>
```
### 添加可拖拽的地图标记
```

console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
    coordinate={{
      latitude: 39.91095,
      longitude: 116.37296,
    }}
  />

```
### 自定义标记图片及信息窗体
```
const coordinate = {
  latitude: 39.706901,
  longitude: 116.397972,
}

自定义信息窗体

```
### 更多请访问: https://github.com/qiuxiang/react-native-amap3d

Leanote's Blog

Navigation

Recent Posts

Friend Links