反应本机地图。 Google 区域更改完成后地图返回初始位置

Question

我希望在地图上列出带有标记的注册用户，he/she 可以看到附近的应用程序用户。地图显示了初始标记，但除了卡在其初始位置的地图之外，我看不到动态分配的标记。比如我把地图拖到其他位置，拖完地图，地图又转回来了

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch, Alert, AppRegistry } from 'react-native';
import MapView from 'react-native-maps';
import Fetchdata from './Fetchdata.js';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default class Stage extends Component {
  render() {
    return (
      <View style ={styles.container}>
        <Fetchdata />
      </View>
    );
  }
}

FetchData.js

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert, AppRegistry} from 'react-native'
import MapView, {Marker} from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
export default class Fetchdata extends Component {
  constructor (props) {
    super(props);
  }
  state = {
      latitude: 3.148561,
      longitude: 101.652778,
      markers: [{
    title: 'hello',
    coordinates: {
      latitude: 3.148561,
      longitude: 101.652778
    },
      },
      {
    title: 'hello',
    coordinates: {
      latitude: 3.149771,
      longitude: 101.655449
    },
      }]
   };
   componentDidMount = () => {
     navigator.geolocation.getCurrentPosition(
      (position) => {
    this.setState({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      error: null,
    });

      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
   }
   onRegionChange (region) {
     fetch('https://isg.info.tr/query_maps.php' + '?latitude=' + this.state.latitude + '&longitude=' + this.state.longitude , {
    method: 'GET'
     })
     .then((response) => response.json())
     .then((responseJson) => {
       const newState = Object.assign({}, this.state);
       newState.markers.coordinates = responseJson;
       this.setState(newState);
       //Alert.alert(responseJson+ " ")
      //Alert.alert('https://isg.info.tr/query_maps.php' + '?latitude=' + this.state.latitude + '&longitude=' + this.state.longitude);
       //this.markers = responseJson;
    console.log(responseJson);
     })
     .catch((error) => {
    console.error(error);
     });
     //Alert.alert(responseJson);
   };
   render() {
      return (
      <View style={styles.container}>
      <MapView
      style={styles.map}
      region={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
        latitudeDelta: 0.015,
        longitudeDelta: 0.015,
      }}
      onRegionChangeComplete={this.onRegionChange.bind(this)}
      >
      {this.state.markers.map((marker, index) => (
        <MapView.Marker key={index} coordinate={marker.coordinates} title={marker.title} />
      ))}
    </MapView>
      </View>
      );
   }
}

Json 来自主服务器查询的文件

[{"latitude" : 40.3565,"longitude" : 27.9774},{"latitude" : 40.3471,"longitude" : 27.9598},{"latitude" : 40,"longitude" : 27.9708}]

Answer 1

您正在复制 onRegionChange 中的状态。这包括 this.state.latitude 和 this.state.longitude，当您在 fetch 调用后执行 setState 时，它们根本不会更新。因此，一旦 setState 执行，地图将 "snap back" 到最后保存在 state 中的任何内容。

解决此问题的一种方法是使用传递给 onRegionChange 的值更新 region 控制的 state 值，如下所示（使用您的编码风格）：

.then((responseJson) => {
  const newState = Object.assign({}, this.state);
  newState.markers.coordinates = responseJson;
  newState.latitude = region.latitude;
  newState.longitude = region.longitude;
  this.setState(newState);
  console.log(responseJson);
})

或者，如果您依赖其他地方的 up-to-date region 信息（latitude、longitude），请先更新您的 state 部分在你的代码中。然后在setState回调中调用fetch：

onRegionChange (region) {
  this.setState({
    latitude: region.latitude,
    longitude: region.longitude,
  }, () => {
    fetch('https://isg.info.tr/query_maps.php' + '?latitude=' + 
    // ...the rest of your fetch call code here as is...
  });
};

如果是我的话，我根本不会对您的 state 进行批发复制。这在 React 中不是很常见的做法，并且在 state 中处理大量数据时效率低下。因此，我可能会选择只更新 state 中需要更新的部分 (markers):

.then((responseJson) => {
  let markers = [...this.state.markers];
  markers.coordinates = responseJson;
  this.setState({ markers });
  console.log(responseJson);
})

请注意，我不会更新存储在 state 中的 latitude 和 longitude 值，因为如果您所做的全部设置 [=]，MapView 应该可以正常工作20=] 一次，然后永远不会更新它使用的值。但是，如果这是您的用例并且您不打算控制您的 region，我建议改用 initialRegion 道具。以后这样的错误会少一些。

Answer 2

试试这个，将你的标记放在地图的中心，当用户移动地图时，使用 onRegionChangeComplete 获取最后一个位置。你可以从这个link

中读懂这个概念

https://alizahid.dev/blog/keep-marker-in-center-and-move-map-around-it

反应本机地图。 Google 区域更改完成后地图返回初始位置

React Native Maps. Google Map turns back to initial location after on region change complete

google-maps-markers

react-native