在我的应用程序中,我必须从 Google Places API 获取数据并在 Google map 上显示标记。在这一部分中,我必须显示标记,然后获取位置并将其发送到我的后端。有人可以帮忙吗?
<input
type="text"
id="pac-input"
className="controls"
placeholder="Search Box"
value={this.state.fields["event_location"] || ''}
onChange={this.onChange.bind(this, "event_location")} />
<div id="map"></div>
<p>Unable to locate? <button className="btn btn-default inline" data-toggle="collapse" data-target="#address_panel">Enter an Address</button></p>
最佳答案
您可以使用方法textSearch()
来执行您想要的操作。例如:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
query: 'restaurant'
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
Google Places API确实不错,花点时间读一下。
如果你想使用使用React组件的包,我推荐react-google-maps 。你应该看看。
关于javascript - 如何通过 React 使用 Google Map Places API?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47257351/