问题描述
我尝试在我的应用程序中使用谷歌地点自动完成功能,因此我可以将它与地理定位一起使用来获取经度和纬度(分别针对起点和目的地),它只显示地图,不显示 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;
它的结果是这样的:
有什么我似乎缺少的东西吗?请协助
编辑
我已经放入,它只是闪烁,没有别的。它仍然是同样的事情。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)