javascript - React Native map View 初始渲染

Question

我正在通过以下屏幕为单个帖子加载带有来自 API 的标记的 map 。下面的代码工作完美，它在 map 上显示标记，并且 map View 圆圈也出现在与标记相同的位置。

问题:我想将initialRegion设置为标记坐标，以便 map 位于标记所在的正确位置。我尝试使用 posts.lat 和 posts.lng 设置initialRegion 纬度和经度，就像我对 map View 圆所做的那样，但这不适用于初始区域。

仅从 API 加载了一个标记，因为这是一个帖子屏幕

componentDidMount() {
    this.getPosts();
  }

  getPosts() {
    axios
      .get('myAPI')
      .then(response => {
        this.setState({
          post: response.data,
          loading: false
        });
      });
}

render() {
const posts = (this.state ?? this.state.posts) ? this.state.posts : 
    return (
      <MapView style={styles.map}
              initialRegion={{
                  latitude: 43.660192,
                  longitude: -79.425250,
                  latitudeDelta: 0.04,
                  longitudeDelta: 0.05,
              }}
            >

<MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} />

<MapView.Circle
            center={{
              latitude: posts.lat,
              longitude: posts.lng,
            }}
            radius={150}
            strokeWidth={2}
            strokeColor="#3399ff"
            fillColor="rgba(102,204,153,0.2)"
 />

          </MapView>
);
  }

Answer 1

问题是，目前，您的 map 将在您发出大头针坐标的 API 请求之前呈现。如果这是使用react-native-maps，他们的文档指出在初始渲染后更改initialRegion不会导致 map 发生更改:

Changing [the initialRegion] prop after the component has mounted will not result in a region change. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

您需要:

1. 等待 API 响应来渲染 map ，或者
2. 使用初始区域的猜测值渲染 map ，并在 API 调用完成且状态更新后更新 map 位置。

选项 1:

if (this.state.loading) {
  // Better loading logic here
  return <Text>Loading...</Text>
}

return (
  <MapView 
    style={styles.map}
    initialRegion={{
      latitude: posts.lat,
      longitude: posts.lng,
      latitudeDelta: 0.04,
      longitudeDelta: 0.05,
    }}
  >
  </MapView>
);

第二个选项:

// You need to add region to state.
getPosts() {
    axios
      .get('myAPI')
      .then(response => {
        this.setState({
          post: response.data,
          region: {
            latitude: response.data.lat,
            longitude: response.data.long,
            latitudeDelta: 0.04,
            longitudeDelta: 0.05,
          }
          loading: false
        });
      });
}

render() {
  return (
    <MapView 
      style={styles.map}
      initialRegion={{
        latitude: posts.lat,
        longitude: posts.lng,
        latitudeDelta: 0.04,
        longitudeDelta: 0.05,
      }}
      region={this.state.region}
    >
      ...
    </MapView>
  );
}

奖励点:如果您使用animateToRegion，您也可以为这些区域变化设置动画。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods

希望这有帮助!