Question

我是React-Native新手

我创建了一个谷歌地图，但我希望当我打开我的应用程序时，它会首先显示我的位置。我该怎么办？

这是我的代码导出默认类GoogleMapApi扩展Component { state = { mapRegion：null， lastLat：null， lastLong：null， }

  componentDidMount() {
    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
      }
      this.onRegionChange(region, region.latitude, region.longitude);
    });
  }

  onRegionChange(region, lastLat, lastLong) {
    this.setState({
      mapRegion: region,
      // If there are no new values set use the the current ones
      lastLat: lastLat || this.state.lastLat,
      lastLong: lastLong || this.state.lastLong
    });
  }

并且

componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchID);
      }

      onMapPress(e) {
        console.log(e.nativeEvent.coordinate.longitude);
        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);
      }

      render() {
        return (
          <View style={{flex: 1}}>
            <MapView
              style={styles.map}
              region={this.state.mapRegion}
              showsUserLocation={true}
              followUserLocation={true}
              onRegionChange={this.onRegionChange.bind(this)}
              onPress={this.onMapPress.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>
        );
      }
    }

Answer 1

要获取当前位置，您可以使用react-native的GeoLocation库，其文档为here(geoLocation)。

`static getCurrentPosition(geo_success, geo_error?, geo_options?)`

docs for above method avaible here。

您必须使用此方法获取当前位置坐标，并使用这些坐标在地图中查看您的位置。

在地图中显示我的位置react-native

1 个答案: