MapView.Marker 在用户当前位置移动缩放和捏合时不稳定答案

【问题标题】：MapView.Marker is not stable on user current location moves on zooming and pinchingMapView.Marker 在用户当前位置移动缩放和捏合时不稳定
【发布时间】：2016-11-04 13:41:53
【问题描述】：

大家好，我已经在 react-native 中创建了一个 mapView，现在我必须在用户当前位置设置修复标记。我已经使用 navigator.geolocation 获得了当前位置，还使用 MapView.Marker 设置了标记。最初标记显示正确的位置，但在缩放和捏合时会移动

这是我的代码。

    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);
    });
  },

这里是渲染方法

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>

有人可以帮忙吗？提前致谢

【问题讨论】：

标签： javascript android google-maps react-native google-maps-markers

【解决方案1】：

这里是解决方案。这是更新的代码

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>

问题是 navigator.geolocation.watchPosition 每当它发生变化时它都会更新我的新区域，因此标记会随着区域变化而变化。

【讨论】：