如何在反应原生地图中拖动我当前的位置标记？答案

【问题标题】：How to drag my current location marker in react native maps?如何在反应原生地图中拖动我当前的位置标记？
【发布时间】：2020-12-02 19:49:28
【问题描述】：

我已经用 react native map npm 实现了一个谷歌地图。并且地图视图正在显示，但当前位置标记在设备中不可见，但在模拟器中，标记正在显示。

现在试图实现拖动当前位置标记以获取 lat long val。但是我无法拖动当前位置标记的标记，并且标记在 mapView 中不可见。

这是我目前尝试的代码：

 <MapBG>
                    <MapView showsUserLocation
                        ref={map => { this.map = map }}
                        data={markers}
                        initialRegion={initialRegion}
                        renderMarker={renderMarker}
                        onMapReady={this.onMapReady}
                        showsMyLocationButton={true}
                        showsUserLocation={true}
                        onRegionChange={this.onRegionChange}
                        onPress={this.onMapPress}
                        onRegionChangeComplete={this.onRegionChange}
                        style={StyleSheet.absoluteFill}
                        textStyle={{ color: '#bc8b00' }}
                        containerStyle={{ backgroundColor: 'white', borderColor: '#BC8B00' }}
                    >

                        <Marker
                            // coordinate={{ latitude: 51.5078788, longitude: -0.0877321 }}
                            onPress={() => this.setState({ visible: true }) + setTimeout(() => alert(this.state.visible), 200)}
                            coordinate={this.onRegionChange.latitude, this.onRegionChange.longitude}
                            pinColor="green"
                            // zIndex="9"
                            // image={require("../../assets/icons/marker.png")}
                            draggable={true}

                        ><MarkerSvg /></Marker>

                    </MapView>
                </MapBG>

任何帮助都非常感谢...

【问题讨论】：

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

【解决方案1】：

您不能直接放置静态坐标并进行拖放。您必须管理状态，以便当您将标记拖到另一个标记时，根据其经度和纬度变化。

const Map = () => {
  const [pin, setPin] = useState({
    latitude: 37.78825,
    longitude: -122.4324,
  });

  return (
    <MapView
      ..........
      <Marker
        draggable
        coordinate={pin}
        onDragEnd={e => {
          setPin(e.nativeEvent.coordinate);
        }} />
    </MapView>
  );
};

【讨论】：