React Native Maps：实现可拖动标记的最佳方式是啥？

Posted 2023-03-15

【中文标题】React Native Maps：实现可拖动标记的最佳方式是啥？

【英文标题】：React Native Maps: What's the best way to implement a draggable marker?React Native Maps：实现可拖动标记的最佳方式是什么？

【发布时间】：2020-01-23 12:07:37

【问题描述】：

我有一张地图，我需要在其中添加一个可拖动的标记以允许用户选择一个点。

如果我选择常规方法

<MapView
initialRegion=
....
>
    <Marker coordinate=this.state.coordinates draggable />
</MapView

这对用户来说反馈不是很流畅，因为标记需要先长按才能拖动，并且不能拖动到地图的当前边界之外，即用户需要手动滚动地图到另一个区域，然后才能将标记放在那里。

所以我通过遵循这个概念找到了一种解决方法： https://alizahid.dev/blog/keep-marker-in-center-and-move-map-around-it

<MapView
initialRegion=
latitudeDelta: 0.02,
longitudeDelta: 0.02,
latitude: this.state.coordinates.latitude,
longitude: this.state.coordinates.longitude

onRegionChange=(result) => this.setState(coordinates: result)
style=height: 300
>
    <Marker coordinate=this.state.coordinates />
</MapView>

这几乎是完美的，除了我使用一个单独的函数使用地理定位服务来获取用户的当前位置并将标记放在那里

componentDidMount() 
Geolocation.getCurrentPosition((position) => 
                this.setState(
                    coordinates: 
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude
                    
                );
            ,
            (error) => 
                console.log(error);
                alert("Couldn't get GPS location. Please try again or choose pickup point manually.");
            ,
             enableHighAccuracy: true, maximumAge: 10000, timeout: 10000, showLocationDialog: true, forceRequestLocation: true)

当这个函数返回位置时，标记被移动到正确的点，但是，地图不会滚动到放置标记的区域，因为initialRegion在安装后不会改变区域。

如果我使用region 而不是initialRegion，则地图根本不会滚动，因为onRegionChange 回调会不断更改状态并且可能与region 属性冲突。

解决所有问题的最佳解决方法是什么？

【参考方案1】：

最好的方法是通过绝对定位在屏幕中心显示一个标记。像这样

        <View style=styles.markerFixed>
               <Icon
            style=
              color: '#B11C01',
            
            size=30
            name='map-marker-alt'
            solid
          />
        </View>

 markerFixed: 
    left: 0,
    right: 0,
    marginLeft: 0,
    marginTop: 0,
    position: 'absolute',
    top: '40%',
    alignItems: 'center',
  ,

现在您可以将地图拖动到任何位置。这将显示标记移动的效果。但实际地图正在移动。现在使用 onRegionChangeComplete 函数将更新的 latlang 转换为地址。您可以在标记上方显示转换后的地址就像在镜头中一样。

import Geocoder from 'react-native-geocoding';
 <MapView
            style=styles.mapStyle
              provider=PROVIDER_GOOGLE
              region=
                latitude: lat,
                longitude: long,
                latitudeDelta: 0.0922 / 10,
                longitudeDelta: 0.0421 / 10,
              
              onRegionChangeComplete=this.onRegionChange
            />

    convertToAddress() 
        let lat, long = this.state;
        if (this.state.firstIndication === 0) 
          this.setState(firstIndication: 1);
          return;
        
        Geocoder.from(lat, long)
          .then(json => 
            var addressComponent = json.results[0].address_components[0];
            this.setState(name: addressComponent.long_name);
          )
          .catch(error => console.warn(error));
      [![enter image description here][1]][1]

【参考方案2】：

最好的解决方法是使用react-native-location-view

它为您提供了一个可拖动的地图，您可以轻松地通过标记选择任何位置。

您可以参考https://www.npmjs.com/package/react-native-location-view