24小时补胎服务
`style.css`文件的内容:
css
body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding:0;
}.container {width: 100%;max-width: 600px;padding: 20px;margin: 0 auto;
}h1 {font-size: 24px;margin-bottom: 10px;
}p {font-size: 16px;margin-bottom: 20px;
}form {display: flex;flex-direction: column;gap: 10px;
}label {font-size: 16px;
}input {width: 100%;padding: 5px;font-size: 16px;border: 1px solid ccc;
}results {background-color: efefef;padding: 10px;margin-top: 20px;
}results ul {list-style-type: none;padding: 0;
}results li {margin-bottom: 5px;
}results a {text-decoration: none;color: 000;
}`script.js`文件的内容:
javascript
const form = document.querySelector('form');
const results = document.getElementById('results');form.addEventListener('submit', (e) => {e.preventDefault();const location = document.getElementById('location').value;// 使用附近搜索API查找补胎店const request = {query: '补胎店',location: location,radius: 5000,};const service = new google.maps.places.PlacesService(document.createElement('div'));service.nearbySearch(request, (response, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {results.innerHTML = '
';for (let i = 0; i < response.results.length; i++) {const place = response.results[i];results.innerHTML += `
-
${place.name}
- ${place.formatted_phone_number}
`;}results.innerHTML += '
';} else {results.innerHTML = '
抱歉,找不到任何补胎店。
';}});
});注意:本代码需要Google Maps API密钥才能正常工作。确保将`google.maps.places.PlacesServiceStatus.OK`替换为正确的常量值。本代码还可以根据需要进行修改以获取其他类型的业务。