Question

我让一切正常，但似乎无法找到合适的代码让应用放大放在最后一个标记上。

这是我的代码：

getEarthquakes(){       
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];
        for (var i = 0; i < responseData.features.length; i++) {
          var coords = responseData.features[i].geometry.coordinates;
          var marker = {
            key: responseData.features[i].id,
            coordinate: {
              latitude: coords[1],
              longitude: coords[0],
            }
          }
          markers.push(marker);
        }

        this.setState({
         markers: markers,
         loaded: true,
         marker: markers,
         latitude: coords[1],
         longitude: coords[0]
        });
      }
    ).done();
}


render() {
  return (
      <View style={styles.container}>
        <MapView.Animated
          style={styles.map}
          region={this.state.marker}
          showsUserLocation={true}
          followUserLocation={true}>

             {this.state.markers.map(marker => (
                <MapView.Marker
                  key={marker.key}
                  coordinate={marker.coordinate}
                />
             ))}
        </MapView.Animated>
      </View>
     );
  }
}

我在过去30天内呼吁所有的地震。所以我想我只是放下region={this.state.marker}让它放大到最后一个标记，但这不起作用。它只是把我放在非洲，没有设置标记。有谁知道什么可行？

编辑：

我的构造函数/ componentWillMount：

class Additional extends React.Component {
  constructor() {
    super();
    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      markers: [],
      loaded: false
    }

  }

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (posData) => {
        this.setState({
          region: {
            latitude: posData.coords.latitude,
            longitude: posData.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
            accuracy: posData.coords.accuracy
          }
        });
      },
      (error) => alert(error.message),
      {timeout: 10000}
    );
    this.getEarthquakes()
  }

更新18-01-2018：

在没有使用它近一个月之后，我发现了一段令人悲伤的代码。

更新18-01-2018：

我以为我找到了那段令人悲伤的代码。但它现在在重新编写代码后起作用。很混乱。这可能只是利希尼的敏锐眼光。

Answer 1

您尚未在任何地方定义this.state.marker以使其正常工作。尝试先设置状态。

getEarthquakes(){       
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];
        for (var i = 0; i < responseData.features.length; i++) {
          var coords = responseData.features[i].geometry.coordinates;
          var marker = {
            key: responseData.features[i].id,
            coordinate: {
              latitude: coords[1],
              longitude: coords[0],
            }
          }
          markers.push(marker);
        }

        this.setState({
          markers: markers,
          loaded: true,
          marker: markers[markers.length-1]   // set marker state
        });
      }
    ).done();   
}

修改

注意这段代码。您使用this.state.marker作为区域。

<MapView.Animated
      style={styles.map}
      region={this.state.marker}
      showsUserLocation={true}
      followUserLocation={true}>

         {this.state.markers.map(marker => (
            <MapView.Marker
              key={marker.key}
              coordinate={marker.coordinate}
            />
         ))}
</MapView.Animated>

现在注意你在下面的代码片段中存储的状态。

this.setState({
      region: {
        latitude: posData.coords.latitude,
        longitude: posData.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
        accuracy: posData.coords.accuracy
      }
});

您正在设置this.state.region，而您应根据上述代码设置this.state.marker。因此，请尝试将上述内容更改为

this.setState({
      marker: {
        latitude: posData.coords.latitude,
        longitude: posData.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
        accuracy: posData.coords.accuracy
      }
});

如何放大最后一个标记设置？

1 个答案: