0.0.1 • Published 9 years ago

react-native-amaplocating v0.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

react-native-amaplocating

AMap (gaode map) locating sdk for react-native

install

npm install react-native-amaplocating --save

iOS

  1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-amaplocating and add RCTAMapLocating.xcodeproj.
  2. Add libRCTAMapLocating.a to `Build Phases -> Link Binary With Libraries.
  3. Click on RCTAMapLocating.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React - if they aren't, then add them. This is so XCode is able to find the headers that the RCTAMap source files are referring to by pointing to the header files installed within the react-native node_modules directory.
  4. Add node_modules/react-native-amaplocating/RCTAMapLocating/RCTAMap/AMap/*.framework to your project.
  5. Set your project's framework Search Paths to include $(PROJECT_DIR)/../node_modules/react-native-amaplocating/ios/RCTAMapLocating/RCTAMap/AMap.
  6. Whenever you want to use it within React code now you can: var MapView = require('react-native-amaplocating');

android

  1. in android/settings.gradle

    include ':app', ':react-native-amaplocating'
    project(':react-native-amaplocating').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amaplocating/android/react-native-amaplocating')
  2. in android/app/build.gradle add:

    dependencies {
      ...
      compile project(':react-native-amaplocating')
    }
  3. in MainActivity.java add Newer versions of React Native

      ```
    ...
    import com.yiyang.reactnativebaidumap.ReactMapPackage; // <--- This!
    ...
    public class MainActivity extends ReactActivity {
    
     @Override
     protected String getMainComponentName() {
         return "sample";
     }
    
     @Override
     protected boolean getUseDeveloperSupport() {
         return BuildConfig.DEBUG;
     }
    
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
         new MainReactPackage()
         new ReactMapPackage() // <---- and This!
       );
     }

    }

     **Older versions of React Native**

    ... import com.yiyang.rnamaplocating.ReactMapPackage; // <--- This! ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this);

       mReactInstanceManager = ReactInstanceManager.builder()
               .setApplication(getApplication())
               .setBundleAssetName("index.android.bundle")
               .setJSMainModuleName("index.android")
               .addPackage(new MainReactPackage())
               .addPackage(new ReactMapPackage()) // <---- and This!
               .setUseDeveloperSupport(BuildConfig.DEBUG)
               .setInitialLifecycleState(LifecycleState.RESUMED)
               .build();
    
       mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);
    
       setContentView(mReactRootView);

    }

  4. specify your Gaode Maps API Key in your AndroidManifest.xml:

    <application
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
        <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
        <meta-data
          android:name="com.amap.api.v2.apikey"
          android:value="{{Your gaode maps API Key Here}}"/>
    </application>

usage

...
import YYAMapLocation from 'react-native-amaplocating';

...
componentDidMount() {
    YYAMapLocation.getCurrentPosition((position) => {
        console.log("location get current position: ", position);
        this.setState({
            text: JSON.stringify(position)
        });
    }, (error) => {
        console.log("location get current position error: ", error);
        this.setState({
            text: "error: " + error
        });
    });
    this.watchID = YYAMapLocation.watchPosition((position) => {
        console.log("watch position: ", position);
        this.setState({
            text: "watch position: " + JSON.stringify(position)
        });
        YYAMapLocation.clearWatch(this.watchID);
    });
}

render() {
    <View style={styles.container}>
        <Text style={styles.welcome}>
            {this.state.text}
        </Text>
    </View>
}