在深夜或清晨寻找便利店可能会很困难。为了让您更轻松地找到您附近的 24 小时便利店,我们创建了这个列表。只需在下面的搜索栏中输入您的地址或邮政编码,即可找到附近的便利店。
javascript
// script.js
const searchForm = document.querySelector('form');
const resultsElement = document.querySelector('results');searchForm.addEventListener('submit', (e) => {e.preventDefault();// 获取用户输入的地址或邮政编码const address = e.target.querySelector('input[name="address"]').value;// 使用 Google Places API 查找附近的 24 小时便利店const request = {location: address,radius: '500',query: '24-hour convenience store',};const service = new google.maps.places.PlacesService(resultsElement);service.nearbySearch(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {//清除之前的搜索结果resultsElement.innerHTML = '';// 创建一个列表来显示便利店const listElement = document.createElement('ul');resultsElement.appendChild(listElement);// 遍历搜索结果并创建列表项results.forEach((result) => {const listItemElement = document.createElement('li');const nameElement = document.createElement('h3');const distanceElement = document.createElement('p');const addressElement = document.createElement('p');nameElement.textContent = result.name;distanceElement.textContent = `距离:${result.distance} 米`;addressElement.textContent = result.vicinity;listItemElement.appendChild(nameElement);listItemElement.appendChild(distanceElement);listItemElement.appendChild(addressElement);listElement.appendChild(listItemElement);});}});
});