html模板 获取当前位置
时间: 2023-05-15 18:05:07 浏览: 81
你可以使用 JavaScript 的 geolocation API 来获取当前位置,然后将其传递给 HTML 模板。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>获取当前位置</title>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById("location").innerHTML = "Latitude: " + lat + "<br>Longitude: " + lon;
}
</script>
</head>
<body onload="getLocation()">
<h1>当前位置</h1>
<p id="location"></p>
</body>
</html>
```
这个代码会在页面加载时调用 `getLocation()` 函数,该函数会检查浏览器是否支持 geolocation API,如果支持则调用 `getCurrentPosition()` 函数来获取当前位置。获取到位置后,会调用 `showPosition()` 函数来显示经纬度信息。你可以根据自己的需要修改这个代码来适应你的 HTML 模板。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)