Question

我正在使用react-native应用程序来包含地图，但我无法使其正常工作。地图仅显示蓝色地图。可以看到标记，但地图全是蓝色。地图只显示海洋。 GPS已在我的Android设备上开启。地图仍然指向（经度，纬度）=（0,0）。

我该如何解决这个问题？这是我的代码片段。

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道具。这个道具是用于初始渲染。

<强> initialRegion

地图要显示的初始区域。请改用这个道具   仅当您不希望来控制地图的视口时才能显示区域   除了最初的地区。

在安装组件后更改此prop不会导致   一个地区的变化。

这类似于文本输入的initialValue道具。

您需要使用region prop。

<强>区域

地图要显示的区域。

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

我无法获得当地的反应

1 个答案: