设置基于 react native 的标记 google places autocomplete

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>

我已经根据 Whosebug 的答案尝试了其他方法，但它们似乎已经过时，我不能运行

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 in snack，您需要设置自己的 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;

设置基于 react native 的标记 google places autocomplete

set marker based on react native google places autocomplete

android

google-maps

react-native

expo

googleplacesautocomplete