高德地图的使用及自定义图标

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 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',
  },
})