dwd-fe / react-native-amap Goto Github PK

View Code? Open in Web Editor NEW

87.0 7.0 25.0 63.29 MB

React Native AMap component for iOS + Android

License: MIT License

Java 11.21% JavaScript 13.92% Python 0.19% Objective-C 74.36% Shell 0.31%

react-native amap gaode

react-native-amap's Introduction

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

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
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

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.<ReactPackage>asList(
          ...
          , new AMapPackage()
          ...

AndroidManifest.xml:

    <!-- Geolocation -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><!--用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><!--用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /><!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />

    <application ...>
      <meta-data android:name="com.amap.api.v2.apikey" android:value="cc5fea37cc1d8bd20434a0020d85ec12"></meta-data>

Usage

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

  render(){
    return (<View style={{flex: 1, backgroundColor: '#f00'}}>
      <AMapView initialRegion={{latitude: 30.315888, longitude: 120.165817}} showsUserLocation>
        <AMapView.Marker pinColor="green" draggable title='xxx' description="这是一个好地方" coordinate={{latitude: 30.315888, longitude: 120.165817}} />
      </AMapView>
    </View>);
  }

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 in android. Then render a new marker for the user location.

react-native-amap's People

Contributors

Stargazers

Watchers

react-native-amap's Issues

ios10编译错误

@interface RCTConvert : NSObject //error:duplicate interface definition for class 'RCTConvert'

<AMapView.Marker
image={require('../../Image/location_pin_select.png')}
title={"我的位置"}
coordinate={this.state.myLocation}
>
<AMapView.Callout tooltip={true} style={{width:Util.size.width
-100,height:50,flexDirection:'row'}}>
<Image
style={styles.imageStyle}
source={{uri: 'https://facebook.github.io/react/img/logo_small.png'}}/>
<View style={{width:Util.size.width - 160,height:50}}>
这是一个好地方
美丽的大濮阳

</AMapView.Callout>
</AMapView.Marker>ker>

编译失败

:AirMaps:prepareReleaseDependencies
:AirMaps:compileReleaseAidl
:AirMaps:compileReleaseRenderscript
:AirMaps:generateReleaseBuildConfig
:AirMaps:generateReleaseAssets UP-TO-DATE
:AirMaps:mergeReleaseAssets
:AirMaps:generateReleaseResValues
:AirMaps:generateReleaseResources
:AirMaps:mergeReleaseResources
:AirMaps:processReleaseManifest
:AirMaps:processReleaseResources
:AirMaps:generateReleaseSources
:AirMaps:processReleaseJavaRes UP-TO-DATE
:AirMaps:compileReleaseJavaWithJavac
/Users/zhangjunhou/JJWallet/node_modules/react-native-amap-view/android/src/main/java/com/dianwoba/rctamap/RegionChangeEvent.java:17: 错误: 对于Event(int,long), 找不到合适的构造器
super(id, System.currentTimeMillis());
^
构造器 Event.Event()不适用
(实际参数列表和形式参数列表长度不同)
构造器 Event.Event(int)不适用
(实际参数列表和形式参数列表长度不同)
注: 某些输入文件使用了未经检查或不安全的操作。
注: 有关详细信息, 请使用 -Xlint:unchecked 重新编译。
1 个错误
:AirMaps:compileReleaseJavaWithJavac FAILED

ios在17年就要强制https了，谁会升级高德sdk吗？

另外，现在这个在ios10还没有跑起来，直接就退出了

author的amap非常实用,放大地图偶遇crash,请求指点一二

使用react-native-amap

库文件遇到这样子的crash情况请求author 略加指点

FATAL EXCEPTION: main
Process: com.asiainfo.channelmanager, PID: 7994
java.lang.AssertionError: Dispatched event hasn't been initialized
at com.facebook.infer.annotation.Assertions.assertCondition(Assertions.java:65)
at com.facebook.react.uimanager.events.EventDispatcher.dispatchEvent(EventDispatcher.java:115)
at com.dianwoba.rctamap.AMapView$9.run(AMapView.java:526)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)

iOS 无法自定义大头针的图片

我给marker传过image属性以后，地图上就什么也不显示了，我使用XCode的3D试图查看，也没有找到大头针试图，谢谢您的浏览

RegionChangeEvent.java:17: 错误: 对于Event(int,long), 找不到合适的构造器

android编译时发现这个错误。
RegionChangeEvent.java:17: 错误: 对于Event(int,long), 找不到合适的构造器
super(id, System.currentTimeMillis());
^
构造器 Event.Event()不适用
(实际参数列表和形式参数列表长度不同)
构造器 Event.Event(int)不适用
(实际参数列表和形式参数列表长度不同)

Marker

请问我想在地图上标记多个标记，大约几百个，不知道该怎么实现呢？

android longitudeDelta，latitudeDelta 报错

AMapViewManager.java
AMapView.java
里面 longitudeDelta 和 latitudeDelta 不存在
能修为下面的么

lngDelta = region.hasKey("longitudeDelta") ? region.getDouble("longitudeDelta") : 0.0;
latDelta = region.hasKey("latitudeDelta") ? region.getDouble("latitudeDelta") : 0.0;

android引用Search时报错

hi，
我在使用
AMapView.Search.AMapInputTipsSearch("肯德基","杭州").then((a)=>{
console.log("AMapInputTipsSearch",a);
}).catch((e)=>{console.log(e)})功能时，会报一个
和Handler相关的错误。
请问有修改的方法吗？还是我使用的方式不对？

Marker绑定事件

<AMapView.Marker key = {i} pinColor={Markers.pinColor} draggable title={Markers.title} description={Markers.description}
coordinate={{latitude:Markers.coordinate.latitude, longitude:Markers.coordinate.longitude} } onPress={(Markers.title)=>{this.onMarker(Markers.title)}} />请问我这样绑定点击事件，为什么箭头函数下报红？？？