https://github.com/qiuxiang/react-native-amap3d
npm install react-native-amap3d
react-native link react-native-amap3d
编辑 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 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',
},
})