【问题标题】:React Native MapBox Get Clicked LocationReact Native MapBox 获取点击位置
【发布时间】:2020-10-03 21:47:39
【问题描述】:

我成功地将@react-native-mapbox-gl/maps 添加到我的项目中。 现在我不需要需要用户的当前位置,但我只需要获取用户在地图上点击的位置的坐标(纬度和经度)。我已经尝试了一切,但没有任何效果! 我的代码:

import MapboxGL, {MapView, UserLocation} from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(
    'MyAccessToken', );


export default class .... .... {

getLastLocation(location) {

        ToastMaker(location, 'short')

    }

render() {

        return (
                <View style={{flex: 1}}>
                    <View style={{height: '100%',
                        width: '100%',
                        backgroundColor: 'blue'}}>
                        <MapView style={{ flex: 1}}

                          //These Don't Work!
                        //onUserLocationUpdate={(property) => this.getLastLocation(property)}
                        //onLongPress={(property) => this.getLastLocation(property[0].coordinates)}
                        //onLongPress={(property) => this.getLastLocation(property.geometry) }
                        //onLongPress={(property) => ToastMaker(property.properties.screenPointY,'short') }
                       >
                            <MapboxGL.PointAnnotation
                                draggable={true}
                                id={'1'}
                                selected={true}
                                coordinate={this.state.coordinates}
                            />
                        </MapView>
                    </View>
                </View>
        )
    }

}

* 我只需要用户在地图上选择的坐标 谢谢 *

【问题讨论】:

    标签: reactjs react-native google-maps mapbox openstreetmap


    【解决方案1】:

    使用MapView#onPress 属性。

    <MapView
      ... 
      onPress={(feature)=>console.log('Coords:', feature.geometry.coordinates)}
    >
      ...
    </MapView>
    

    完整示例请参见ShowPointAnnotation.js

    已编辑:修复函数中的变量错误“功能”

    【讨论】:

    • 人们说消防员是真正的英雄,而我们在 * 上有一个:D
    • @mrgeek 绝对是,mfazekas 是 react native mapbox gl 的主要贡献者。真的很有用