location - 获取世博会地点的纬度和经度以在 map 上获取

Question

我在世博会的位置文档中找到了此代码:

state = {
location: null,
errorMessage: null,
};

componentWillMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
  this.setState({
    errorMessage: 'Oops, this will not work on Sketch in an Android 
    emulator. Try it on your device!',
    });
    } else {
  this._getLocationAsync();
   }
  }

    _getLocationAsync = async () => {
      let { status } = await Permissions.askAsync(Permissions.LOCATION);
   if (status !== 'granted') {
      this.setState({
    errorMessage: 'Permission to access location was denied',
   });
   }

     let location = await Location.getCurrentPositionAsync({});
   this.setState({ location });
    };

  render() {
   let text = 'Waiting..';
   if (this.state.errorMessage) {
    text = this.state.errorMessage;
   } else if (this.state.location) {
    text = JSON.stringify(this.state.location);
    }

   return (
     <View style={styles.container}>
     <Text style={styles.paragraph}>{text}</Text>
       </View>
      );
      }
     }

它可以返回我的纬度、经度、准确度时间戳和其他内容，对我来说效果很好。

有人可以告诉我如何获取坐标并将其渲染在 map 上吗？我想使用经纬度状态并将其从我的位置访问的值传递到该状态以进一步将其放入 map View 的初始区域

谁能帮忙？

Answer 1

我知道这个答案有点晚了，但以防万一有人遇到它，这就是我所做的:

向状态添加了区域属性:

state = {
    location: null,
    region: null,
    errorMessage: null,
};

在 getLocations 中，我将从 getCurrentPositionAsync() 调用返回的位置对象转换为区域:

getLocationAsync = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted') {
            this.setState({
                errorMessage: 'Permission to access location was denied',
            });
        }

        let location = await Location.getCurrentPositionAsync({});

        const region = {
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
            latitudeDelta: 1.0,
            longitudeDelta: 1.0
        }

        this.setState({ location, region });
    };

最后在渲染方法中，我使用 state 的区域属性来设置 map View 中的区域:

render() {
        return (
            <MapView
                initialRegion={this.state.region}
            />
        );
    }

获取位置的异步调用完成后， map 将跳转到当前位置。