如何在反應原生地圖中拖動我當前的位置標記？

Question

我已經實現了一個谷歌 map 與反應原生 map npm。 並且 map 視圖正在顯示，但當前位置標記在設備中不可見，但在模擬器中，標記正在顯示。

現在嘗試實現拖動當前位置標記以獲取 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>

任何幫助非常感謝請...

Answer 1

不能直接放 static 坐標並拖放。 您必須管理 state 以便當您將標記拖到另一個標記時，然后根據其經度和緯度變化。

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