react-native-maps：如何在按钮按下时跟随用户位置

Posted 2023-02-23

【中文标题】react-native-maps：如何在按钮按下时跟随用户位置

【英文标题】：react-native-maps : How to follow user location on button pres-s-

【发布时间】：2019-03-15 04:26:25

【问题描述】：

我正在使用react-native-maps，效果很好。但是我有两个问题。

我可以使用followsUserLocation 自动跟踪用户位置，但是当我移动地图时，它会不断将我拖回用户位置。我该如何解决这个问题？

我想要刷新按钮，当用户按下按钮时，我希望我的地图视图跟随用户位置。

constructor() 
    super();
    this.state = 
        followsUserLocation: true,
    ;



mapView() 
    return(
        <MapView style=styles.map
        showsUserLocation
        followsUserLocation=this.state.followsUserLocation
        initialRegion=
        latitude: 37.523814,
        longitude:  126.927494,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421/>
   )

任何 cmets 或建议将不胜感激！提前致谢！

【参考方案1】：

尝试 onUserLocationChange 回调并使用 setState 相应地设置您的区域

   state = 
    showsUserLocation: true,
    followsUserLocation : true,
    mapRegion: 
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    ,
  ;

    <MapView
            style= flex: 1 
            region=this.state.mapRegion
            //use this callback to update the regions
            onUserLocationChange=event => console.log(event.nativeEvent)
            showsUserLocation=this.state.showsUserLocation
            followsUserLocation=this.state.followsUserLocation
          />

【讨论】：

在回调中 onUserLocationChange 设置 followUserLocation = false

【参考方案2】：

如果你正在使用 Reack Hook 你可以创建一个 var 而不是 useState。 在我的例子中，为了防止应用程序在三元条件下崩溃。

  var liveMap = 
mapRegion: 
  latitude: lattitude ? lattitude : 19.88134866090193,
  longitude: longitude ? longitude : 73.97658792586263,
  latitudeDelta: 0.0022,
  longitudeDelta: 0.0021,
,



     <MapView
        mapType="satellite"
        style= height: 400, width: "100%" 
        showsUserLocation=false
        zoomEnabled=true
        zoomControlEnabled=true
        followsUserLocation=true
        // onUserLocationChange=(event) => console.log("this is event",event.nativeEvent)
        showsUserLocation=true
        followsUserLocation=true
        region=liveMap.mapRegion
        // initialRegion=
        //   latitude: lattitude ? lattitude : 19.88134866090193,
        //   longitude: longitude ? longitude : 73.97658792586263,
        //   latitudeDelta: 0.0022,
        //   longitudeDelta: 0.0021,
        // 
      >
        <Marker
          coordinate=
            latitude: lattitude ? lattitude : 19.88134866090193,
            longitude: longitude ? longitude : 73.97658792586263,
          
          title="JavaTpoint"
          description="Java Training Institute"
        />
      </MapView>