Question

我正在通过以下屏幕从我的API中为单个帖子加载带有标记的地图。下面的这段代码可以完美地工作，它在地图上显示标记，并且mapview圆也显示在与标记相同的位置。

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

从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

问题是，当前，您的地图将在您向图钉坐标发出API请求之前呈现。如果使用的是react-native-maps，他们的文档会指出在初始渲染后更改initialRegion不会导致对地图的更改：

在安装组件后更改[initialRegion]属性将不会导致区域更改。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

您需要：

等待直到获得API响应以渲染地图，或者
使用初始区域的猜测值渲染地图，并在您的API调用完成并且状态已更新后更新地图位置。

选项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

希望这会有所帮助！

Answer 2

我以前曾经遇到过这个问题，所以我像这样解决了它们。

首先，您应该先获取远程数据，然后再导航到地图视图。
并且您应该使用道具或导航参数将latlng数据发送到MapView。

第二，您应该通过传递的数据设置initialRegion。

React Native Map View初始渲染

2 个答案: