# react-native-yxz-baidumap

> Baidu Map SDK modules and view for React Native(Android & IOS), support react native 0.30+

Latest version **1.0.8** (published 2018-06-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-yxz-baidumap
pnpm add react-native-yxz-baidumap
yarn add react-native-yxz-baidumap
bun add react-native-yxz-baidumap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2018-06-12 |
| First published | 2018-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 231.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | wangfaguo |
| Maintainers | wangfaguo |

## Links

- npm: https://www.npmjs.com/package/react-native-yxz-baidumap
- Repository: https://github.com/wangfaguo/react-native-yxz-baidumap
- Homepage: https://github.com/wangfaguo/react-native-yxz-baidumap#readme
- Issues: https://github.com/wangfaguo/react-native-yxz-baidumap/issues
- npm.io page: https://npm.io/package/react-native-yxz-baidumap

## Recent versions

- 1.0.8 (latest) — 2018-06-12
- 1.0.7 — 2018-06-08
- 1.0.6 — 2018-06-08
- 1.0.5 — 2018-06-08
- 1.0.1 — 2018-06-06
- 1.0.0 — 2018-06-06

## README

# react-native-yxz-baidumap [![npm version](https://img.shields.io/npm/v/react-native-baidu-map.svg?style=flat)](https://www.npmjs.com/package/react-native-yxz-baidumap)

Baidu Map SDK modules and view for React Native(Android & IOS), support react native 0.40+

百度地图 React Native 模块，支持 react native 0.40+


借鉴的https://github.com/lovebing/react-native-baidu-map ，总是不更新，就自己重新封装了一下

使用的百度地图SDK版本：4.0.0

![Android](https://raw.githubusercontent.com/wangfaguo/react-native-yxz-baidumap/master/images/android.jpg)
![IOS](https://raw.githubusercontent.com/wangfaguo/react-native-yxz-baidumap/master/images/ios.jpg)

### Install 安装
    npm install react-native-yxz-baidumap --save
    or
    yarn add react-native-yxz-baidumap
### Import 导入

#### Android Studio
- settings.gradle `
include ':react-native-yxz-baidumap'
project(':react-native-yxz-baidumap').projectDir = new File(settingsDir, '../node_modules/react-native-yxz-baidumap/android')`

- build.gradle `compile project(':react-native-yxz-baidumap')`

- MainApplication`new BaiduMapPackage(getApplicationContext())`
- AndroidMainifest.xml `<meta-data
            android:name="com.baidu.lbsapi.API_KEY" android:value="xx"/>`

#### Xcode
- Project navigator->Libraries->Add Files to 选择 react-native-yxz-baidumap/ios/RNBaiduMap.xcodeproj
- Project navigator->Build Phases->Link Binary With Libraries 加入 libRNBaiduMap.a
- Project navigator->Build Settings->Search Paths， Framework search paths 添加 $(SRCROOT)/../node_modules/react-native-yxz-baidumap/ios/lib，Header search paths 添加 $(SRCROOT)/../node_modules/react-native-yxz-baidumap/ios/RNBaiduMap
- 添加依赖, react-native-yxz-baidumap/ios/lib 下的全部 framwordk， CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前为 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前为libstdc++.6.0.9.dylib）
- 添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

- 其它一些注意事项可参考百度地图LBS文档

##### AppDelegate.m init 初始化
    #import "RCTBaiduMapViewManager.h"
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        ...
        [RCTBaiduMapViewManager initSDK:@"api key"];
        ...
    }

### Usage 使用方法

    import { MapView, MapTypes, MapModule, Geolocation } from 'react-native-baidu-map

#### MapView Props 属性
| Name                    | Type  | Default  | Extra
| ----------------------- |:-----:| :-------:| -------
| zoomControlsVisible     | bool  | true     | Android only
| trafficEnabled          | bool  | false    |
| baiduHeatMapEnabled     | bool  | false    |
| mapType                 | number| 1        |
| zoom                    | number| 10       |
| center                  | object| null     | {latitude: 0, longitude: 0}
| marker                  | object| null     | {latitude: 0, longitude: 0, title: ''}
| markers                 | array | []       | [marker, maker]
| onMapStatusChangeStart  | func  | undefined| Android only
| onMapStatusChange       | func  | undefined|
| onMapStatusChangeFinish | func  | undefined| Android only
| onMapLoaded             | func  | undefined|
| onMapClick              | func  | undefined|
| onMapDoubleClick        | func  | undefined|
| onMarkerClick           | func  | undefined|
| onMapPoiClick           | func  | undefined|

#### MapModule Methods (Deprecated)
    setMarker(double lat, double lng)
    setMapType(int mapType)
    moveToCenter(double lat, double lng, float zoom)
    Promise reverseGeoCode(double lat, double lng)
    Promise reverseGeoCodeGPS(double lat, double lng)
    Promise geocode(String city, String addr),
    Promise getCurrentPosition()

#### Geolocation Methods

| Method                    | Result
| ------------------------- | -------
| Promise reverseGeoCode(double lat, double lng) | `{"address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""}`
| Promise reverseGeoCodeGPS(double lat, double lng) |  `{"address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""}`
| Promise geocode(String city, String addr) | {"latitude": 0.0, "longitude": 0.0}
| Promise getCurrentPosition() | IOS: `{"latitude": 0.0, "longitude": 0.0, "address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""}` Android: `{"latitude": 0.0, "longitude": 0.0, "direction": -1, "altitude": 0.0, "radius": 0.0, "address": "", "countryCode": "", "country": "", "province": "", "cityCode": "", "city": "", "district": "", "street": "", "streetNumber": "", "buildingId": "", "buildingName": ""}`

---
_Source: https://npm.io/package/react-native-yxz-baidumap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._