MapView.Marker在用户当前位置上放大和缩小时不稳定 [英] MapView.Marker is not stable on user current location moves on zooming and pinching

问题描述

我已经在react-native中创建了一个mapView，现在我必须在用户当前位置上设置修复标记。我已经使用navigator.geolocation获取当前位置，也使用MapView.Marker设置标记，初始标记显示正确的位置，但在放大和缩小时移动。

这是我的代码。 / p>

  getInitialState（）{
返回{
地区：{
纬度：LATITUDE，
 longitude：LONGITUDE，
 latitudeDelta：LATITUDE_DELTA，
 longitudeDelta：LONGITUDE_DELTA 
}，
}; （
），
 
 componentDidMount：function（）{
 navigator.geolocation.getCurrentPosition（
（position）=> {
 this.setState（{ 
地区：{
纬度：position.coords.latitude，
经度：position.coords.longitude，
 latitudeDelta：LATITUDE_DELTA，
 longitudeDelta：LONGITUDE_DELTA 
 } 
}）; 
}，
）; 
 
 this.watchID = navigator.geolocation.watchPosition（（position）=> {
 const newRegion = {
 latitude：position.coords.latitude，
 longitude ：position.coords.longitude，
 latitudeDelta：LATITUDE_DELTA，
 longitudeDelta：LONGITUDE_DELTA 
} 
 
 this.onRegionChange（newRegion）; 
}）; 
}，
  

这里是渲染方法

  render（）{
 return（
< View style = {styles.container}> 
< MapView 
 ref =map
 style = {styles.map} 
 region = {this.state.region} 
 onRegionChange = {this.onRegionChange} 
> 
< MapView.Marker coordinate = {this.state.region}> 
< /MapView.Marker> 
< / MapView> 
  pre> 
 
 
有人可以帮忙吗？
在此先感谢
解决方案
这是解决方案，这是更新的代码。
  componentDidMount：function（）{
 navigator。 geolocation.getCurrentPosition（
（position）=> {
 this.setState（{
 region：{
 latitude：position.coords.latitude，
 longitude：position .coords.longitude，
 latitudeDelta：LATITUDE_DELTA，
 longitudeDelta：LONGITUDE_DELTA 
} 
}）; 
}，
）; 
 
 $ b返回（
< View style = {styles.container}> 
< MapView 
 ref =map
 style = {styles.map} 
 region = {this.state.region} 
 onRegionChange = {this.onRegionChange} 
> 
< MapView.Marker coordinate = {this.state.region} /> 
 
< / MapView> 
  
问题是navigator.geolocation.watchPosition它正在更新我的新区域，无论它何时发生变化，因此标记在区域更改上发生变化。
 
Hey guys i have created a mapView in react-native now i have to set fix marker on user current location. I have obtained current location using navigator.geolocation also set the marker using MapView.Marker initially marker shows correct location but gets moved on zooming and pinching

Here is my code.
    getInitialState() {
    return {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
    };
  },

  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );

    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });
  },
here is the render method 
render() {
    return (
      <View style={styles.container}>
        <MapView
          ref="map"
          style={styles.map}
          region={this.state.region}
          onRegionChange={this.onRegionChange}
        >
          <MapView.Marker coordinate={this.state.region}>
          </MapView.Marker>
        </MapView>
can anybody help on this?
Thanks in advance
解决方案
Here is the solution . This is the updated code
componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );
  },

  render() {
    return (
      <View style={styles.container}>
        <MapView
          ref="map"
          style={styles.map}
          region={this.state.region}
          onRegionChange={this.onRegionChange}
        >
          <MapView.Marker coordinate={this.state.region} />

        </MapView>
The problem was navigator.geolocation.watchPosition it was updating my new region whenever it is getting changed hence the marker was changing on region change.

                        
这篇关于MapView.Marker在用户当前位置上放大和缩小时不稳定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！