我无法在本机反应中获得当前位置

Question

我正在使用 react-native 应用程序来包含地图，但我无法使其工作。 该地图仅显示蓝色地图。可以看到标记，但地图全是蓝色的。地图一直只显示大海。 GPS 已在我的 Android 设备上打开。地图仍然指向 (longitude, latitude) = (0,0)。

我该如何解决这个问题？这是我的代码的 sn-p。

export default class MapsScreen extends Component{
  constructor(props){
    super(props)

    this.state = {
      initialPosition:{
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
      markerPosition: {
        latitude: 0,
        longitude: 0,
      }
    }
  }

  watchID: ?number = null

  componentDidMount() {

    navigator.geolocation.getCurrentPosition(
      (position) => {

          var lat = (position.coords.latitude)
          var long = (position.coords.longitude)
          alert(lat + " "+ long )
          var initialRegion ={
            latitude: lat,
            longitude: long,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.05,
          }

          this.setState({ initialRegion: initialRegion })
          this.setState({ markerPosition: initialRegion })
      },

       (error) => {alert('Error getting location')
      },
      {
        enableHighAccuracy: true, timeout: 20000, maximumAge: 1000
      }
    )
    this.watchID = navigator.geolocation.watchPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)
      var lastRegion = {
        latitude: lat,
        longitude: long,
        longitudeDelta: 0.0922,
        latitudeDelta: 0.05,
      }   
      this.setState({ initialRegion: lastRegion })
      this.setState({ markerPosition: lastRegion })
    })
  }
  componentWillMount() {
    navigator.geolocation.clearWatch(this.watchID)
  }
render(){
    return(
      <MapView
        initialRegion={this.state.initialPosition}
        style= {{ height: 250, width: '100%'}}
      >
        <MapView.Marker
          coordinate = {this.state.markerPosition}
         >
         </MapView.Marker>
        </MapView>

    )
  }
}

我正在使用 “反应”：“16.3.0-alpha.1”， “反应原生”：“0.54.0-rc.3”， "react-native-maps": "^0.20.1",

请帮帮我 谢谢

Answer 1

当您获得地理位置时，您正在设置 initialRegion 属性。此道具用于初始渲染。

初始区域

地图要显示的初始区域。改用这个道具 仅当您不想控制地图的视口时 除了初始区域。

在组件安装后更改此属性不会导致 地区变化。

这类似于文本输入的 initialValue 属性。

你需要使用region prop。

地区

地图要显示的区域。

区域由中心坐标和跨度定义 要显示的坐标。