功能：

通過(guò)高德地圖SDK實(shí)現(xiàn)定位、返回地理位置經(jīng)緯度坐標(biāo)、關(guān)鍵字檢索及周邊檢索功能。

使用步驟：

一、鏈接AMap庫(kù)

參考：https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

手動(dòng)添加：

1、添加react-native-amap-zmt插件到你工程的node_modules文件夾下
2、添加AMap庫(kù)中的.xcodeproj文件在你的工程中
3、點(diǎn)擊你的主工程文件，選擇 Build Phases，然后把剛才所添加進(jìn)去的.xcodeproj下的Products文件夾中的靜態(tài)庫(kù)文件（.a文件），拖到Link Binary With Libraries組內(nèi)。

自動(dòng)添加：

$ npm install react-native-amap-zmt --save 
或
$ yarn add react-native-amap-zmt

$ react-native link

二、開發(fā)環(huán)境配置

參考：http://lbs.amap.com/api/ios-location-sdk/guide/create-project/manual-configuration

1、引入地圖庫(kù)

在TARGETS->Build Phases-> Link Binary With Libaries中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇AMap插件目錄下的 MAMapKit.framework、AMapFoundationKit.framework、AMapSearchKit.framework 文件添加到工程中。

選擇Build Settings，搜索Search Paths，然后添加庫(kù)所在的目錄$(SRCROOT)/../node_modules/react-native-amap-zmt/ios/AMap。

2、引入資源文件

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework的Resources文件夾下，AMap.bundle資源文件中存儲(chǔ)了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to“工程名”…，從MAMapKit.framework->Resources文件中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。

注意：2D地圖和3D地圖的資源文件是不同的，在進(jìn)行SDK切換時(shí)，需要同時(shí)更換對(duì)應(yīng)的資源文件。

3、引入系統(tǒng)庫(kù)

左側(cè)目錄中選中工程名，在TARGETS->Build Phases-> Link Binary With Libaries中點(diǎn)擊“+”按鈕，在彈出的窗口中查找并選擇所需的庫(kù)（見下表），單擊“Add”按鈕，將庫(kù)文件添加到工程中。

• JavaScriptcore.framework
• SystemConfiguration.framework
• CoreTelephony.framework
• CoreLocation.framework
• libz.tbd
• libc++.tbd
• libstdc++.6.0.9.tbd
• Security.framework

三、配置plist文件

1、修改數(shù)據(jù)訪問安全

iOS9為了增強(qiáng)數(shù)據(jù)訪問安全，將所有的http請(qǐng)求都改為了https，為了能夠在iOS9中正常使用地圖SDK，請(qǐng)?jiān)?code>"Info.plist"中進(jìn)行如下配置，否則影響SDK的使用。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2、開啟定位

iOS 8 - iOS 10 版本：
NSLocationWhenInUseUsageDescription表示應(yīng)用在前臺(tái)的時(shí)候可以搜到更新的位置信息。
NSLocationAlwaysUsageDescription申請(qǐng)Always權(quán)限，以便應(yīng)用在前臺(tái)和后臺(tái)（suspend 或terminated）都可以獲取到更新的位置數(shù)據(jù)。

iOS 11 版本：
NSLocationAlwaysAndWhenInUseUsageDescription申請(qǐng)Always權(quán)限，以便應(yīng)用在前臺(tái)和后臺(tái)（suspend或terminated）都可以獲取到更新的位置數(shù)據(jù)（NSLocationWhenInUseUsageDescription也必須有）。

如果需要同時(shí)支持在iOS8-iOS10和iOS11系統(tǒng)上后臺(tái)定位，建議在plist文件中同時(shí)添加NSLocationWhenInUseUsageDescription、NSLocationAlwaysUsageDescription和NSLocationAlwaysAndWhenInUseUsageDescription權(quán)限申請(qǐng)。

四、簡(jiǎn)單使用

屬性

方法

//index.ios.js

import React, { Component } from 'react';
import Map from 'react-native-amap-zmt';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    AlertIOS,
    TextInput,
} from 'react-native';

export default class MapView extends Component {

    constructor(){
        super();
        this.state={
            latitude: 0,
            longitude: 0,
            title:'',
            subtitle:'',
            message:'',
            GeoName:'',
            KeywordsCity:'',
            KeywordsName:'',
            AroundName:'',
        }
    }

    //獲取當(dāng)前位置信息
    _onGetLocation(event){
        this.setState({
            latitude: event['latitude'],
            longitude: event['longitude'],
            title:event['title'],
            subtitle:event['subtitle'],
            message:event['message'],
        });
    }

    _onGeocodeSearch(event){
        AlertIOS.alert(event['message'])
    }

    _onSubmitEditing(event) {
        this.setState({
        GeoName:'北京久其軟件',
        // AroundName:'肯德基',
        // KeywordsName:event.nativeEvent.text,
        // KeywordsCity:'北京',

        });
    }

    _onChangeText(text) {

    }


    render() {
        return (
            <View style={styles.container}>

            <TextInput style={styles.search} placeholder="搜索"
                onSubmitEditing={this._onSubmitEditing.bind(this)}
                returnKeyType="search"
                placeholderTextColor="#494949" autoFocus={false}
                onChangeText={this._onChangeText}/>

            <Text style={{marginTop:10}}>{'緯度='+this.state.latitude}</Text>
            <Text style={{marginTop:5}}>{'經(jīng)度='+this.state.longitude}</Text>
            <Text style={{marginTop:5}}>{'title='+this.state.title}</Text>
            <Text style={{marginTop:5}}>{'subtitle='+this.state.subtitle}</Text>
            <Text style={{marginTop:5}}>{'結(jié)果='+this.state.message}</Text>

            <Map style={styles.map}
                AMapKey="04a46bd238047b8bf33fba5723ecad72"
                onGetLocation={(event)=>{this._onGetLocation(event)}}
                showTraffic={true}
                scrollEnabled={false}

                GeoName={this.state.GeoName}
                onGeocodeSearch={(event)=>{this._onGeocodeSearch(event)}}

                KeywordsCity={this.state.KeywordsCity}
                KeywordsName={this.state.KeywordsName}
                onKeywordsSearch={(event)=>{}}

                AroundName={this.state.AroundName}
                onAroundSearch={(event)=>{}}
            >
            </Map>

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    map: {
        marginTop:10,
        height:400,
        width:Dimensions.get('window').width - 20,
    },
    search: {
        width:Dimensions.get('window').width - 20,
        height: 35,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius:3,
        fontSize:15
    }

});

效果展示

github鏈接：
https://github.com/zhoumeitong/react-native-amap-zmt