【问题标题】:getting lat long from google map in react native从谷歌地图获得拉长反应原生
【发布时间】:2019-02-08 21:02:43
【问题描述】:

我无法使用 React Native 从谷歌地图 API 获取纬度长度

我正在使用这个扩展来自动完成 react-native-google-places-autocomplete

我正在构建一个拼车应用程序,为此,我必须获取用户的接送位置。经过许多努力,我得到了自动完成工作。

现在的问题是,我需要所选位置的纬度和经度。我试过了,但我不能。

需要帮助,谢谢。

<GooglePlacesAutocomplete
  placeholder='Enter Location'
  minLength={2}
  autoFocus={false}
  returnKeyType={'default'}
  fetchDetails={true}
  onPress={(data, details = null) => { 
// I tried this One 
// Tried to get the reponce from API HERE

  console.log(data, details);
}}
  styles={{
    textInputContainer: {
      backgroundColor: 'rgba(0,0,0,0)',
      borderTopWidth: 0,
      borderBottomWidth:0
    },
    textInput: {
      marginLeft: 0,
      marginRight: 0,
      height: 38,
      color: '#5d5d5d',
      fontSize: 16
    },
    predefinedPlacesDescription: {
      color: '#1faadb'
    },
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'YOUR API KEY',
    language: 'en', // language of the results
    types: '(cities)' // default: 'geocode'
  }}
  currentLocation={false}
/>

【问题讨论】:

  • 嗯,到目前为止你尝试了什么?
  • 请检查我输入代码的问题 查看 onPress 事件
  • 我在 data 和 details 变量中一无所获
  • 我从不使用react-native,但你必须明白谷歌有很多api。所以自动完成只会给你带来一些关于想要的地方的信息,而不是纬度坐标。为此,您必须使用 geocoder APIdevelopers.google.com/maps/documentation/geocoding/intro
  • 我不知道你的库应该如何工作,但我使用github.com/tolu360/react-native-google-places 进行自动完成,它运行良好。如果您需要,我可以通过功能示例帮助您使用此库。

标签: google-maps react-native autocomplete


【解决方案1】:

试试这个:

import RNGooglePlaces from 'react-native-google-places';

//constructor here

openSearchModal() {
  RNGooglePlaces.openAutocompleteModal()
  .then((place) => {
  // place represents user's selection from the
  // suggestions and it is a simplified Google Place object.
  console.log(place);  //here you will have lat and long
     this.setState({
       address: place,
     })
  })
  .catch(error => console.log("ERROR: " + error.message));  // error is a Javascript Error object
}

render() {
   <TouchableOpacity onPress={() => this.openSearchModal()}>
       <Text>Map</Text>
   </TouchableOpacity>
}

【讨论】:

  • 进展如何?
  • 嘿,我在尝试安装时收到错误 react-native-google-places,Android 依赖项 'com.google.android.gms:play-services-maps' 有不同编译 (11.6.2) 和运行时 (16.0.0) 类路径的版本。您应该通过 DependencyResolution 手动设置相同的版本
猜你喜欢
  • 1970-01-01
  • 2020-02-20
  • 2021-02-05
  • 2019-11-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-10
  • 2017-07-25
相关资源
最近更新 更多