一、成果展示

二、知识点
(一)Geolocation API
Geolocation API 用于检索用户的位置,例如,它可以用于使用映射 API 显示他们的位置。
网址:https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API#examples
三、代码
(一)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, Lee</h1>
<script>
if('geolocation' in navigator) {
/* geolocation is available */
console.log("geolocation available");
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
document.getElementById('latitude').textContent = lat;
document.getElementById('longitude').textContent = lon;
});
} else {
/* geolocation IS NOT available */
console.log("geolocation not available")
}
</script>
<P>latitude: <span id="latitude"></span>°</P>
<P>longitude: <span id="longitude"></span>°</P>
</body>
</html>
参考:https://www.youtube.com/watch?v=3ls013DBcww&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X&index=10