后端怎么接收使用autocomplete输入地址的前端 并返送到google地图上且显示最近的停车场 使用js写代码
时间: 2024-06-12 08:08:06 浏览: 160
google-place-autocomplete:React在React上使用Google Place Autocomplete API的最佳做法
首先,在前端页面中,我们需要使用一个输入框和一个按钮来触发地址的自动补全功能。可以使用Google Maps API中的Autocomplete组件来实现此功能。代码如下:
```html
<input id="address-input" type="text" placeholder="Enter your address">
<button id="search-btn">Search</button>
```
然后,在JavaScript代码中,我们需要使用Google Maps API中的Geocoding服务将输入的地址转换为经纬度坐标,并在地图上显示出来。同时,我们需要使用Places API中的Nearby Search服务来搜索最近的停车场,并在地图上显示出来。代码如下:
```javascript
// 初始化地图
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
// 初始化Autocomplete组件
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address-input'));
// 点击搜索按钮触发事件
document.getElementById('search-btn').addEventListener('click', function() {
// 获取输入的地址
var address = document.getElementById('address-input').value;
// 调用Geocoding服务将地址转换为经纬度坐标
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
// 在地图上显示转换后的坐标
map.setCenter(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
// 调用Nearby Search服务搜索最近的停车场
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 500,
type: ['parking']
}, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
// 在地图上显示停车场
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
}
}
});
}
});
});
```
以上代码实现了在前端页面中使用Autocomplete组件输入地址,并通过Geocoding服务将地址转换为经纬度坐标,并使用Places API中的Nearby Search服务搜索最近的停车场,然后在地图上显示出来。
阅读全文