适用于React Native的Google Places Autocomplete替代方案查询

开源自建方案 #

• react-native-autocomplete-input 搭配本地地址库：若应用仅服务特定区域，可提前下载对应区域公开的地址POI数据库，搭配该轻量输入补全组件实现功能，无任何第三方API调用成本
• 自托管代理转发请求：在已开通INR结算的GCP实例上部署代理服务，修改常用的react-native-google-places-autocomplete组件的请求地址指向自有代理端，由代理端完成请求转发与签名，绕开前端直接调用Google Maps Platform的结算限制

支持INR结算的商用替代方案 #

• MapmyIndia 地址自动补全服务：印度本土地图服务商，完全支持INR结算，官方提供适配React Native的SDK，本土地址数据覆盖精度优于Google服务，调用成本较Google Places低30%左右
• OpenStreetMap衍生服务：
  • Nominatim 开源免费地址查询接口，无结算要求，搭配react-native-autocomplete-search组件即可快速实现补全功能，仅高并发场景下存在调用频率限制
  • LocationIQ 基于OSM的商用服务，支持INR支付，提供的免费额度足够小型应用使用，超出部分按调用量阶梯计费

最简实现示例（基于Nominatim） #

import React, { useState } from 'react';
import Autocomplete from 'react-native-autocomplete-input';
import { View, Text } from 'react-native';

const PlaceAutocomplete = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [placeList, setPlaceList] = useState([]);

  const queryPlaces = async (inputText) => {
    setSearchQuery(inputText);
    if (inputText.length < 3) {
      setPlaceList([]);
      return;
    }
    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(inputText)}&format=json&addressdetails=1&limit=5`);
    const result = await response.json();
    setPlaceList(result);
  };

  return (
    <View style={{ flex: 1, paddingTop: 50, marginHorizontal: 20 }}>
      <Autocomplete
        data={placeList}
        value={searchQuery}
        onChangeText={queryPlaces}
        flatListProps={{
          keyExtractor: (item) => item.place_id,
          renderItem: ({ item }) => <Text style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: '#eee' }}>{item.display_name}</Text>
        }}
      />
    </View>
  );
};

export default PlaceAutocomplete;

内容的提问来源于stack exchange，提问作者pavan kumar