地理位置html+css
时间: 2023-09-07 14:17:59 浏览: 57
要显示地理位置,可以使用HTML5的`<geolocation>`标签。它可以获取用户的地理位置信息。但是,它需要用户授权才能访问位置信息。
下面是一个简单的示例,它将显示用户的位置:
```html
<!DOCTYPE html>
<html>
<head>
<title>地理位置示例</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>我的位置</h1>
<div id="map"></div>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("该浏览器不支持获取地理位置。");
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: lat, lng: lng},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
title: '我的位置'
});
}
getLocation();
</script>
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</body>
</html>
```
在上面的示例中,我们使用了Google Maps API来显示地图。如果您使用这个示例,请将`YOUR_API_KEY`替换为您的Google Maps API密钥。