在React Native中从Google Places Autocomplete获取纬度和经度

Question

我已经为我的地址字段实现了自动完成，但是从Google Maps Places自动完成返回的json中不包括地点的地理编码坐标。

有一些答案似乎不适用。例如，这个答案提到了像google.maps.places.Autocomplete(input, options);这样的东西，我认为在React Native中不存在。

其他答案似乎基于react-native-google-places-autocomplete，但我已经自己实现了这个功能，希望不必再次使用该模块。

这是我调用API的方法。

  async handleAddressChange() {
    const url = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${GoogleAPIKey}&input=${this.state.address}`;
    try {
      const result = await fetch(url);
      const json = await result.json();
      this.setState({ addressPredictions: json.predictions });
    } catch (err) {
      console.error(err);
    }
  }

  setAddress(prediction) { 
    this.setState({ address: prediction.description, showPredictions: false });
  }

API响应中没有任何place或geometry属性：最初的回答

Object {
  "description": "1234 Some Avenue Northeast, Washington, DC, USA",
  "id": "4c79fba1b3a5ad33478b79b54896a75a4d56ca53",
  "matched_substrings": Array [
    Object {
      "length": 4,
      "offset": 0,
    },
  ],
  "place_id": "ChIJneQ1fBO5t4kRf8mTw4ieb4Q",
  "reference": "ChIJneQ1fBO5t4kRf8mTw4ieb4Q",
  "structured_formatting": Object {
    "main_text": "1234 Some Avenue Northeast",
    "main_text_matched_substrings": Array [
      Object {
        "length": 4,
        "offset": 0,
      },
    ],
    "secondary_text": "Washington, DC, USA",
  },
  "terms": Array [
    Object {
      "offset": 0,
      "value": "1600",
    },
    Object {
      "offset": 5,
      "value": "Maryland Avenue Northeast",
    },
    Object {
      "offset": 32,
      "value": "Washington",
    },
    Object {
      "offset": 44,
      "value": "DC",
    },
    Object {
      "offset": 48,
      "value": "USA",
    },
  ],
  "types": Array [
    "street_address",
    "geocode",
  ],
}

- Jonathan Tuzman

---

响应中除了预测之外，应该还有其他属性，这些属性仅在用户实际选择其中一个建议之前起作用。 - undefined

使用此数据，使用返回的place_id（在上面的示例中为ChIJneQ1fBO5t4kRf8mTw4ieb4Q）向Places API发出Place Details Request。 - undefined

@MrUpsidown 这似乎是最好的方法。如果你将其作为答案发布，我很乐意将其标记为答案。 - undefined

给你！请看下面的内容 :) - undefined

Answer 1

我已找到相同问题的解决方案- 只需像这样使用-

<GooglePlacesAutocomplete
        GooglePlacesDetailsQuery={{ fields: "geometry" }}
        fetchDetails={true} // you need this to fetch the details object onPress
        placeholder="Search"
        query={{
          key: "API_KEY_GOES_HERE",
          language: "en", // language of the results
        }}
        onPress={(data: any, details: any = null) => {
          console.log("data", data);
          console.log("details", details);
          console.log(JSON.stringify(details?.geometry?.location));
        }}
        onFail={(error) => console.error(error)} />

- hamid saifi

---

事情进行得非常顺利 - undefined

谢谢！终于有个有效的方法了！ - undefined

Answer 2

一旦您有了地点ID（例如您问题中的ChIJneQ1fBO5t4kRf8mTw4ieb4Q），您可以进行地点详情请求。

请确保在API调用中包含places库：https://maps.googleapis.com/maps/api/js?libraries=places和一个有效的API密钥。

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 15
    });

    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: 'ChIJneQ1fBO5t4kRf8mTw4ieb4Q'
    }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {

            // Create marker
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            // Center map on place location
            map.setCenter(place.geometry.location);
        }
    });
}

initialize();

#map-canvas {
  height: 160px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initialize">
</script>

- MrUpsidown

---

“Places detail request” 是正确的方法。然而，这个答案似乎是针对 Web 应用程序而不是 React Native 的，并且使用了 google.maps，我相当确定 RN 没有访问权限。尽管如此，在我的情况下，使用简单的 fetch 进行地点详细请求是有效的。 - undefined

是的，这是为一个JS应用程序，但你明白我的意思。你可以向网络服务发出相同的请求。 - undefined

从成本的角度来看，这样做会不会增加额外的API调用？ - undefined