Google 地方信息自动完成不显示或检索建议

问题描述

我尝试在我的应用程序中使用谷歌地点自动完成功能,因此我可以将它与地理定位一起使用来获取经度和纬度(分别针对起点和目的地),它只显示地图,不显示 GooglePlaces 输入框,出发地和目的地。我想知道为什么自动完成文本框没有显示,我已经启用了我应该启用的那些 API,但仍然没有出现。

这是我的代码

import React,{useState} from 'react';
import {StyleSheet,View,Dimensions} from 'react-native';
import MapView,{ Marker,polyline } from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const ShowMap =() =>{

    const [coordinates] = useState([
        {
          latitude: 6.450430,longitude: 3.390460,},{
          latitude: 6.430980,longitude: 3.435880,]);

    return(
        <View style={styles.container}>
                      <GooglePlacesAutocomplete
                placeholder='Origin'
                onPress={(data,details = null) => {
                  // 'details' is provided when fetchDetails = true
                  console.log(data,details);
                }}
                query={{
                  key: 'AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE',language: 'en',}}
                styles={{
                  container:{flex : 0,position:'absolute',width: '100%',zIndex: 1},listView:{backgroundColor : 'white'}
                }}
              />

        <GooglePlacesAutocomplete
                        placeholder='Destination'
                        onPress={(data,details = null) => {
                        // 'details' is provided when fetchDetails = true
                        console.log(data,details);
                        }}
                        query={{
                        key: 'AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE',}}
                        styles={{
                        container:{flex : 0,listView:{backgroundColor : 'white'}
                        }}
                    />
        <MapView
          style={styles.maps}
          initialRegion={{
            latitude: coordinates[0].latitude,longitude: coordinates[0].longitude,latitudeDelta: 0.0622,longitudeDelta: 0.0121,}}>
          <MapViewDirections
            origin={coordinates[0]}
            destination={coordinates[1]}
            apikey="AIzaSyBsy6x3mTXbPQ52qk6XMI9u1NgMfn9-YNE"
            strokeWidth={4}
            strokeColor="#FD0631"
          />
          <Marker coordinate={coordinates[0]} />
          <Marker coordinate={coordinates[1]} />
        </MapView>
      </View>
    );
}


const styles = StyleSheet.create({
    container: {
      flex: 1,maps: {
      width: Dimensions.get('screen').width,height: Dimensions.get('screen').height,});



export default ShowMap;

它的结果是这样的:

Screenshot-1620021029.png

有什么我似乎缺少的东西吗?请协助

编辑

我已经放入,它只是闪烁,没有别的。它仍然是同样的事情。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)