https://github.com/qiuxiang/react-native-amap3d
npm install react-native-amap3d
react-native link react-native-amap3d
获取高德 Key。
编辑 Android 项目的?AndroidManifest.xml（一般在?android\app\src\main\AndroidManifest.xml），添加如下代码：
<application> <!– 确保 meta-data 是直属 application 的子标签 –> <meta-data android:name=”com.amap.api.v2.apikey” android:value=”你的高德 Key”/></application>
对于高德地图做自定义图标 ，使用两个地图组件，在界面显示的地图组件关闭定位，隐藏的地图组件开启定位，将隐藏的地图组件获得的定位传入显示的地图组件做定位显示。
import {MapView, Marker, Polyline,Circle} from ‘react-native-amap3d’export 香港vps default class SendingGoods extends Component { constructor(props){ super(props); this.state={ position:{ accuracy:0, longitude:104.073228, latitude:30.657085, }, address:” } } render() { return ( <View style={{width:width,height:height,backgroundColor:’white’}}><MapView style={{width:width,height:px2dp(400)}} mapType={‘standard’} scrollEnabled={true} rotateEnabled={false} tiltEnabled={false} zoomEnabled={false} showsScale={false} showsCompass={false} zoomLevel={16} showsLabels={true} showsBuildings={false} showsIndoorMap={false} locationEnabled={false} showsZoomControls={false} coordinate={{ latitude: this.state.position.latitude, longitude: this.state.position.longitude, }} onLocation={({nativeEvent}) =>{ this.setState({ position:nativeEvent, }) console.log(this.state.position) } } > <Marker title=”司机当前位置” icon={() => <Image source={require(“../../yinli_icon/public/location.png”)} style={{width:px2dp(58),height:px2dp(75)}}/> } coordinate={{ latitude: this.state.position.latitude, longitude: this.state.position.longitude, }} > </Marker> </MapView> <MapView style={{width:0,height:0,}} locationEnabled onLocation={({nativeEvent}) =>this.setState({position:nativeEvent,})}></MapView> </View> ); }}const style = StyleSheet.create({ marker: { alignItems: ‘center’, borderRadius: 5, padding: 5, }, markerText: { color: ‘#fff’, },})
71328560
