나 개발 지도 위치에 있습니다. 클릭하면 어떤 특정 장소에 얻을 위도 경도 있지만 현재 위치,위도 경도.
I don't 하는 방법을 알고 밖으로 찾을 수 있습니다.
할 수 있는 방법들을 얻을 수 있는 방법을 넣어 마커에서는 위치에 있습니까?
여기에는 나의 코드:
class Maps extends React.Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
marker: {
latlng:{
latitude: null,
longitude: null,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
}
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition (
(position) => { alert("value:" + position) },
(error) => { console.log(error) },
{
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 10000
}
)
}
onMapPress(e) {
alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate))
this.setState({
marker: [{ coordinate: e.nativeEvent.coordinate }]
})
}
render() {
return (
<View style={styles.container}>
<View style={{flexGrow:1}}>
<MapView
ref="map"
provider={this.props.provider}
style={styles.map}
onPress={this.onMapPress.bind(this)}
provider = {PROVIDER_DEFAULT}
mapType="standard"
zoomEnabled={true}
pitchEnabled={true}
showsUserLocation={true}
followsUserLocation={true}
showsCompass={true}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}>
</MapView>
</View>
</View>
)
}
}
나는 그것을 다음과 같은 이러한 단계를 사용하여[email protected]
그리고반응이티브-지도@^0.13.1
사용[email protected]
그리고반응이티브-지도@^0.15.2
에서 날짜:
설정mapRegion
체에서주
,마지막으로경도
를 마지막으로위도
로null
:
state = {
mapRegion: null,
lastLat: null,
lastLong: null,
}
그런 다음에서componentDidMount()
기능의 시계를 위해 각 변경안에는 현재 위치:
componentDidMount() {
this.watchID = navigator.geolocation.watchPosition((position) => {
...
});
}
변경 사항이 있는 경우 업데이트들을이다.상태입니다.mapRegion
통과,실제 좌표 및delta
값이(광산 다를 수 있습니다 너의 것,이렇게 적응이 그들):
componentDidMount() {
this.watchID = navigator.geolocation.watchPosition((position) => {
// Create the object to update this.state.mapRegion through the onRegionChange function
let region = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.00922*1.5,
longitudeDelta: 0.00421*1.5
}
this.onRegionChange(region, region.latitude, region.longitude);
}, (error)=>console.log(error));
}
그런 다음 필요합onRegionChange()
기능,그's 하는 데 사용되"set"새로운 가치를 당신의 요소에 componentDidMount()`기능:
onRegionChange(region, lastLat, lastLong) {
this.setState({
mapRegion: region,
// If there are no new values set the current ones
lastLat: lastLat || this.state.lastLat,
lastLong: lastLong || this.state.lastLong
});
}
마운트를 해제 위치 정보에null()
:
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
하고 렌더링맵뷰
전달 현재mapRegion
object건..마커
안에 그것은 단지 당신을 보여 현재위도
와경도
때 그들은 변경:
render() {
return (
<View style={{flex: 1}}>
<MapView
style={styles.map}
region={this.state.mapRegion}
showsUserLocation={true}
followUserLocation={true}
onRegionChange={this.onRegionChange.bind(this)}>
<MapView.Marker
coordinate={{
latitude: (this.state.lastLat + 0.00050) || -36.82339,
longitude: (this.state.lastLong + 0.00050) || -73.03569,
}}>
<View>
<Text style={{color: '#000'}}>
{ this.state.lastLong } / { this.state.lastLat }
</Text>
</View>
</MapView.Marker>
</MapView>
</View>
);
}
추가[StyleSheet.absoluteFillObject](https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native 수)지도를 렌더링하기 위해 그것을 사용하여 제대로 전체의 폭과 높이의 장치입니다.
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
}
});
그래서에 대한한 인터페이스 사용의 유용성()
기능을 할 수 있는 비슷한onRegionChange()
,그's 을 얻을 실제 좌표 및 그들을 설정:
onMapPress(e) {
let region = {
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude,
latitudeDelta: 0.00922*1.5,
longitudeDelta: 0.00421*1.5
}
this.onRegionChange(region, region.latitude, region.longitude);
}
체크 전체에서 코드엑스포도 있습니다.io(지만네이티브 반응 지도
아't 치)
나는 당신이 이것을 읽는 공식 문서에 대해 geolocalisation 로:https://facebook.github.io/react-native/docs/geolocation.html
그때,현재의 위치를 넣을 수 있는 정보를 귀하의 국가:
navigator.geolocation.getCurrentPosition((position) => {
this.setState({position: {longitude: position.longitude, latitude: position.latitude}});
}, (error) => {
alert(JSON.stringify(error))
}, {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 1000
});
할 수 있음에 귀하의 렌더링 방법,구성하는 당신의 최종 보 마커:
render() {
return (
<MapView ...>
<MapView.Marker
coordinate={this.state.position}
title="title"
description="description"
/>
</MapView>
)
}
보 위치에 대한 권한을 사용하여 다음과 같은 코드:
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
alert("You can use the location")
}
else {
alert("Location permission denied")
}
}
catch (err) {
console.warn(err)
}
현재 위치를 가져올 수 있 위도 경도를 사용하여 다음과 같은 코드:
this.watchID = navigator.geolocation.watchPosition((position) => {
let region = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.00922*1.5,
longitudeDelta: 0.00421*1.5
}
}