您需要找最近的修车店吗?本页面可以帮助您!只需输入您的位置,我们就会为您列出附近的所有修车店。
script.js
javascript
// 获取用户的位置
function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {alert("您的浏览器不支持地理定位。");}
}// 显示用户位置
function showPosition(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;document.getElementById("location").value = latitude + "," + longitude;
}// 显示错误信息
function showError(error) {switch(error.code) {case error.PERMISSION_DENIED:alert("您拒绝了地理定位请求。");break;case error.POSITION_UNAVAILABLE:alert("您的位置信息目前不可用。");break;case error.TIMEOUT:alert("获取您位置信息时超时。");break;case error.UNKNOWN_ERROR:alert("获取您位置信息时出现未知错误。");break;}
}// 提交表单
function submitForm() {var location = document.getElementById("location").value;var url = "results.php?location=" + location;var xhr = new XMLHttpRequest();xhr.open("GET", url, true);xhr.onload = function() {if (xhr.status === 200) {var results = JSON.parse(xhr.responseText);showResults(results);} else {alert("抱歉,无法获取修车店列表。请稍后再试。");}};xhr.send();
}// 显示结果
function showResults(results) {var output = "";for (var i = 0; i < results.length; i++) {var result = results[i];output += "
";output += "
" + result.name + "
";output += "
" + result.address + "
";output += "
" + result.phone + "
";output += "
";}document.getElementById("results").innerHTML = output;
}// 页面加载后执行
window.onload = function() {getLocation();document.getElementById("submit").onclick = submitForm;
};results.php
php
query($query);// 将结果转换为 JSON
$json = json_encode($results->fetch_all(MYSQLI_ASSOC));// 输出 JSON
echo $json;