React Native MapBox 获取点击位置

Posted

技术标签:

【中文标题】React Native MapBox 获取点击位置【英文标题】:React Native MapBox Get Clicked Location 【发布时间】: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>
        )
    


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

【问题讨论】:

【参考方案1】:

使用MapView#onPress 属性。

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

完整示例请参见ShowPointAnnotation.js

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

【讨论】:

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

以上是关于React Native MapBox 获取点击位置的主要内容,如果未能解决你的问题,请参考以下文章

当 shouldsimulate 为 false 时,React Native mapbox android 导航崩溃

mapbox点击列表图标变大

React-Native (iOS) 中的谷歌地图

找不到 com.mapbox.navigator:mapbox-navigation-native:7.0.0

react native 怎么将点击事件传到另一个组件

如何在 React Native 中的对象中获取特定值?