react-native - 在 React Native 中从 Google Places Autocomplete 获取纬度和经度
问题描述
我已经为我的地址字段实现了自动完成,但是从 Google 地图位置自动完成返回的 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",
],
}
解决方案
获得地点 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>
推荐阅读
- javascript - 根据变量显示/隐藏图像
- c++ - 如何将回调函数从 C++ 传递到 Objective-C
- c++ - C++:子类成员的“升级”指针类型
- javascript - 在 AJAX 响应后,翻转插件和 javascript 功能不起作用
- c++ - 联合作为模板化基类的部分特化
- java - java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.createFileWithMode0(Ljava/lang/String;JJJI)Ljava/io/FileDescriptor
- javascript - 如何将文件上传到 AWS 中的预签名 URL?
- java - 如何强制使用 JDK 1.7 的 SBT 安装程序始终使用 Maven 接受的 HTTPS 协议?
- r - 在 dplyr 管道操作中将 here() 函数与 map() 集成
- python - 使用 while:True 块退出代码 -1