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

Question

我想在用户使用 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 的答案尝试了其他方法，但它们似乎已经过时，我无法运行它们

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 属性设置区域和标记的状态。

这里有一个 sample code 在小吃中，您需要设置自己的 API 密钥才能使自动完成功能正常工作，代码 sn-p 如下所示：

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;