react-native-google-autocomplete将结果限制为位置和半径

时间:2019-02-11 16:14:54

标签: react-native

有人可以向我解释如何将结果限制在某个位置周围的半径内吗?

使用 react-native-google-autocomplete https://github.com/EQuimper/react-native-google-autocomplete

我试图在代码中的各个位置添加它,但是locationResults并未进行任何过滤。

我在官方文档中找到了一些资源,但是由于我已经在使用该库,所以我希望暂时保留它。

我应该使用零件,道具吗? 现在,我限制了在用户输入末尾添加城市的结果,但是它非常有限且难看^^

希望您有时间回答我, 最好的问候

我的下面的代码:

<GoogleAutoComplete 
    apiKey="*****"
    debounce={500}
    predefinedPlaces={notLocatedPlace}
    minLength={4}
    language="fr"
    components="country:fr"
    // location={{lat:45.526298,lng: 4.873333}}
    // radius={"20000"}
>
    {({ 
        handleTextChange, 
        locationResults, 
        fetchDetails, 
        isSearching, 
        inputValue, 
        clearSearchs,
        // location,
        // radius,
    }) => (
        <React.Fragment>
            {console.log('locationResults', locationResults)}
            <View 
                style={styles.adressContainer}
                // style={{flexDirection:"row", justifyContent:"center", alignItems:"center"}}
            >
                <TextInput 
                    underlineColorAndroid="#dfdfdf"
                    placeholder="Rechercher une adresse"
                    onChangeText={handleTextChange}
                    value={inputValue}
                    style={styles.streetInput}

                />
                {/* <Button 
                    title="clear" 
                    onPress={clearSearchs} 
                    style={styles.streetNumberInput}
                    // color="#aaa"
                /> */}
            </View>
            {isSearching && <ActivityIndicator size="large" color="#1faadb" />}
            <ScrollView>
                {locationResults.map(el =>(
                    <LocationResultItem 
                        {...el}
                        key={el.id.toString()}
                        fetchDetails={fetchDetails}
                        {...{clearSearchs}}
                        // query={{
                        //     location: '45.526298, 4.873333',
                        //     radius: '15000', //15 km
                        //     strictbounds: true,
                        // }}
                    />
                ))}
            </ScrollView>
            {/* <Text></Text> details a importer 2 way binding*/}
        </React.Fragment>
    )}
</GoogleAutoComplete>

0 个答案:

没有答案