查询结果
-
[车间名称]
[地址]
[电话号码]
[营业时间]
style.css
css
body {font-family: Arial, sans-serif;
}h1 {font-size: 24px;margin-bottom: 10px;
}form {width: 100%;max-width: 500px;margin: 0 auto;
}label {display: block;margin-bottom: 5px;
}input[type="text"] {width: 100%;padding: 5px;margin-bottom: 10px;
}input[type="submit"] {width: 100%;padding: 5px;background-color: 000;color: fff;cursor: pointer;
}results {list-style-type: none;padding: 0;margin: 0;
}results li {border-bottom: 1px solid ccc;padding: 10px;
}results li h3 {font-size: 18px;margin-bottom: 5px;
}results li p {font-size: 14px;margin-bottom: 5px;
}script.js
javascript
const locationInput = document.getElementById("location");
const resultsList = document.getElementById("results");// 处理表单提交
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {e.preventDefault();// 获取位置const location = locationInput.value;// 清除之前的查询结果resultsList.innerHTML = "";// 调用 Places API 进行附近汽车修理店查询const request = {location: location,radius: 1000, // 以米为单位的查询半径types: ["car_repair"],};const service = new google.maps.places.PlacesService(resultsList);service.nearbySearch(request, (results, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {// 遍历结果并显示在页面上for (let i = 0; i < results.length; i++) {const result = results[i];const li = document.createElement("li");const h3 = document.createElement("h3");const p1 = document.createElement("p");const p2 = document.createElement("p");const p3 = document.createElement("p");h3.textContent = result.name;p1.textContent = result.vicinity;p2.textContent = result.international_phone_number;p3.textContent = result.opening_hours?.weekday_text?.join(", ");li.appendChild(h3);li.appendChild(p1);li.appendChild(p2);li.appendChild(p3);resultsList.appendChild(li);}}});
});notes.md要使用此代码，你需要将 Google Places API 密钥添加到 script.js 中。Places API 提供每日配额，在达到配额之前，你可以进行有限数量的查询。此代码仅展示基本查询功能。你可以自定义它以添加更多功能，例如更高级的过滤或地图显示。
