时间戳

首页 > 解决方案 > 从谷歌地图获得拉长反应原生

google-maps - 从谷歌地图获得拉长反应原生

问题描述

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

我正在使用这个扩展来自动完成 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}
/>

标签： google-mapsreact-nativeautocomplete

解决方案

尝试这个：

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

推荐阅读