https://github.com/dwd-fe/react-native-amap

React Native AMap component for iOS + Android
https://github.com/dwd-fe/react-native-amap

amap gaode react-native

Last synced: about 2 months ago
JSON representation

React Native AMap component for iOS + Android

• Host: GitHub
• URL: https://github.com/dwd-fe/react-native-amap
• Owner: dwd-fe
• License: mit
• Created: 2016-05-03T11:49:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-20T13:41:07.000Z (almost 8 years ago)
• Last Synced: 2024-11-28T14:18:03.689Z (2 months ago)
• Topics: amap, gaode, react-native
• Language: Objective-C
• Size: 61.8 MB
• Stars: 87
• Watchers: 7
• Forks: 25
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-amap

React Native AMap component for iOS + Android

react-native-amap-view is a wrapper of AMap's Libraries inspired by react-native-maps and it's usable in Android and iOS

##Demo

![demo-gif](https://raw.githubusercontent.com/dianwoba/react-native-amap/master/doc/assets/demo.gif)

## Installation

`npm install react-native-amap-view --save`

### iOS

Only test on react-native 0.29

* `Add Files to "xxx"` on `Libaries` folder, and select `RCTAMap.xcodeproj`

* In `Link Binary With Libraries`, add `libRCTAMap.a`

* In `Link Binary With Libraries`, add `MAMapKit.framework` and `AMapSearchKit.framework`

* In `Framework Search Paths`, add `$(PROJECT_DIR)/../node_modules/react-native-amap-view/ios`

* `Add Files to "xxx"` on your project, and select `AMap.bundle`

* In `Link Binary With Libraries`, add other libs, see [here](http://lbs.amap.com/api/ios-sdk/guide/create-project/manual-configuration/#t3)

* Make sure `NSAllowsArbitraryLoads` in `Info.plist` is `true`

* Make sure `LSApplicationQueriesSchemes` has `iosamap`

* In `Info.plist`, Add `Privacy - Location Usage Description`=`NSLocationWhenInUseUsageDescription`(for foreground usage) 

  or `NSLocationAlwaysUsageDescription`(for background usage). see [here](http://lbs.amap.com/api/ios-sdk/guide/draw-on-map/draw-location-marker/)

### Android

* `android/setting.gradle`:

```

include ':react-native-amap-view'

project(':react-native-amap-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-view/android')

```

* `android/app/build.gradle`:

```

    compile project(":react-native-amap-view")

```

* `MainApplication.java`:

```

import com.dianwoba.rctamap.AMapPackage;

      

      return Arrays.asList(

          ...

          , new AMapPackage()

          ...

```

* `AndroidManifest.xml`:

```

    

    

    

    

    

    

    

    

    

      

```

## Usage

```

import AMapView from 'react-native-amap-view'

  render(){

    return (

      

        

      

    );

  }

```

ATTENTION: Make sure that the ancestor containers of AMapView is flexed, otherwise you will see an empty view!

### User Location

Dont use the `showsUserLocation` property for it has some bugs. 

Instead, use `geolocation` in iOS and [react-native-amap-location](https://github.com/xiaobuu/react-native-amap-location) in android.

Then render a new marker for the user location.