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

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),添加如下代码:


    
    

对于高德地图做自定义图标 ,使用两个地图组件,在界面显示的地图组件关闭定位,隐藏的地图组件开启定位,将隐藏的地图组件获得的定位传入显示的地图组件做定位显示。

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 (
      
{
                              this.setState({
                                  position:nativeEvent,
                              })
                              console.log(this.state.position)
                            }
                        }
                    >
                        
                               
                            }
                            coordinate={{
                               latitude: this.state.position.latitude,
                              longitude: this.state.position.longitude,
                            }}
                        >
                        
                    
         this.setState({position:nativeEvent,})}>
      
    );
  }
}
const style = StyleSheet.create({
  marker: {
    alignItems: 'center',
    borderRadius: 5,
    padding: 5,
  },
  markerText: {
    color: '#fff',
  },
})

你可能感兴趣的:(react,native)