反应本机（IOS）。我需要更新和打印值纬度和经度

Posted 2023-03-15

【中文标题】反应本机（IOS）。我需要更新和打印值纬度和经度

【英文标题】：react native(IOS). I need to update and print value latitude and longitude

【发布时间】：2017-03-04 06:00:04

【问题描述】：

我需要从真实位置更新纬度和经度（当前位置不是我设置的假位置）

我设置的值是假位置 纬度：14.0208， 经度：100.525

然后我尝试在我的设备上发布。 GPS 正在工作

但我不知道如何从真实位置打印（实时更新）

谢谢。

这是我的代码：

import React,  Component, PropTypes  from 'react';
import 
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    TouchableOpacity,
    MapView
 from 'react-native';
var height, width = Dimensions.get('window');
import api from './api';
import Profile from './Profile';
import ScrollableTabView, DefaultTabBar, ScrollableTabBar  from 'react-native-scrollable-tab-view';
import Info from './Info';
// import motion from './motion';





export default class Route extends Component 
    constructor(props)
    super(props);
    this.state = 
        region: 
            latitude: 14.0208,
            longitude: 100.5250,
        
    ;






    render() 
        return (


            <View style=styles.container>
            <ScrollableTabView
            style=marginTop: 20, 
            initialPage=2
            renderTabBar=() => <ScrollableTabBar />
        >
            <Text tabLabel='Profile'></Text>
            <Text tabLabel='Route'></Text>
            <Text tabLabel='Information'></Text>
            </ScrollableTabView>
            <TouchableOpacity tabLabel='Profile' onPress=() => this.tabView.Profile(2)>
         </TouchableOpacity>

        <MapView style=styles.map
          mapType="standard"
          showsUserLocation=true
          followsUserLocation=true
          showsCompass=false
          showsPointOfInterest=false
                    region=this.state.region
          onRegionChange=this.onRegionChange
        >

        </MapView>
                <View style=styles.container>
          <Text>
          Latitude: this.state.region.latitude'\n'
          Longitude: this.state.region.longitude'\n'

          </Text>
        </View>
      </View>

        );
    






const styles = StyleSheet.create(
    container: 
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    ,
    image: 
        width: 200,
        height: 180,
    ,
    text: 
        color: 'white',
        fontWeight: 'bold',
        backgroundColor: 'transparent',
        marginTop: 20,
    ,
    map: 
        //top: -150,
    width: 700,
    height: 400
  
);

【参考方案1】：

您需要实际收听 GPS 并使用其数据进行更新。查看此文档，尤其是“watchPosition”。您可以将 watchPosition 的回调设置为组件中设置 state.region 的 setter。

https://facebook.github.io/react-native/docs/geolocation.html

【讨论】：

我可以解决它但是当我在模拟器上重新加载它时速度会变慢（延迟）如何解决这个问题我只是添加我的代码并得到延迟 this.onRegionChange = this.onRegionChange.bind(this) ; onRegionChange(region) this.setState( region );