设置标记基于反应原生谷歌地方自动完成

Question

我想在用户使用react-native-google-places-autocomplete搜索位置时生成一个标记。我正在使用世博会反应本机。目前，标记设置在固定位置。我希望根据用户通过react-native-google-places-autocomplete给出的输入来设置它。我怎样才能做到这一点？以下是我的代码：

<View>
<GooglePlacesAutocomplete
placeholder=""
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'en', // language of the results
}}
fetchDetails={true}
onPress={(data, details:any) => { 
setDestinationLatitude(details.geometry.location.lat.toString()); 
setDestinationLongitude(details.geometry.location.lng.toString()); 
}}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details.
keyboardShouldPersistTaps='always'
styles={{
textInputContainer: {
width: "90%",
//top: 8,
alignSelf: 'center'
},
textInput: {
borderColor: grey,
borderWidth: 1,
borderRadius: 5,
height: 48,
paddingBottom: 8,
color: black,
fontSize: 16,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
<View style={style.mapContainer}>
<MapView 
style={style.map} 
region={region}
onRegionChangeComplete={region => setRegion(region)}
>
<Marker coordinate={{ 
latitude: latitude , 
longitude: longitude, 
}}></Marker>
</MapView>
</View>

我已经尝试了基于stackoverflow答案的其他方法，但它们似乎已经过时了，我无法运行它们

Answer 1

为此，首先，您需要获取所选地点的坐标，以将其用作要设置区域的坐标，并在按下自动完成建议中的地点时标记。您可以通过添加以下代码来执行此操作：

GooglePlacesDetailsQuery={{
fields: 'geometry',
}}

我还使用了在选择地点后更改区域和标记状态时将使用的useState。

const [regionCoords, setRegion] = useState({ lat: 37.78825, lng: -122.4324 });
const [marker, setMarker] = useState({ lat: 37.78825, lng: -122.4324 });

接下来，我设置fetchDetails={true}因为我们之前使用的GooglePlacesDetailsQuery坐标将显示在onPress属性的details属性中。

在onPress属性上，我调用一个函数并从属性中设置区域和标记的状态details。

这是零食中的示例代码，您需要设置自己的 API 密钥才能使自动完成正常工作，代码片段如下所示：

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, TextInput, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import MapView, { Marker } from 'react-native-maps';
const GOOGLE_PLACES_API_KEY = ''; // never save your real api key in a snack!
var screenWidth = Dimensions.get('window').width;

const App = () => {
const [regionCoords, setRegion] = useState({ lat: 37.78825, lng: -122.4324 });
const [marker, setMarker] = useState({ lat: 37.78825, lng: -122.4324 });
const onPress = (data, details) => {
setRegion(details.geometry.location);
setMarker(details.geometry.location);
};
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: regionCoords.lat,
longitude: regionCoords.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<Marker coordinate={{ latitude: marker.lat, longitude: marker.lng }} />
</MapView>
<GooglePlacesAutocomplete
styles={styles.searchbar}
placeholder="Search"
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'en', // language of the results
}}
GooglePlacesDetailsQuery={{
fields: 'geometry',
}}
fetchDetails={true}
onPress={onPress}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details.
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute',
},
searchbar: {
description: {
fontWeight: 'bold',
},
predefinedPlacesDescription: {
color: '#1faadb',
},
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
top: 50,
width: screenWidth - 10,
borderWidth: 0,
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 38,
color: '#5d5d5d',
fontSize: 16,
borderWidth: 0,
},
listView: {
backgroundColor: 'rgba(192,192,192,0.9)',
top: 23,
},
},
});
export default App;