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

问题描述

我想在用户使用 react-native-google-places-autocomplete 搜索位置时生成一个标记。我正在使用 expo react native。目前，标记设置在固定位置。我希望它根据用户通过 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 的答案的其他方法，但它们似乎已经过时，我无法运行它们

解决方法

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

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 中的坐标将显示在 details 属性的 onPress 属性中。

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

这里有一个 sample code，您需要设置自己的 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,lng: -122.4324 });
  const [marker,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)',top: 50,width: screenWidth - 10,borderWidth: 0,textInput: {
      marginLeft: 0,marginRight: 0,height: 38,color: '#5d5d5d',fontSize: 16,listView: {
      backgroundColor: 'rgba(192,192,0.9)',top: 23,});

export default App;