要使用react-native-map中的自定义按钮转到当前位置,可以按照以下步骤进行操作:
npm install react-native-maps --save
import MapView, { Marker, Callout } from 'react-native-maps';
import { Button } from 'react-native';
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
>
<Callout>
<Text>This is a marker</Text>
</Callout>
</Marker>
</MapView>
<Button
title="Go to My Location"
onPress={this.goToMyLocation}
/>
</View>
);
}
goToMyLocation = () => {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
this.map.animateToRegion({
latitude,
longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
},
error => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
这样,当点击自定义按钮时,会获取当前位置的坐标,并将地图视图动画移动到该位置。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/tianditu)
领取专属 10元无门槛券
手把手带您无忧上云