HTML自动获取地址,网页中自动获取经纬度值并在地图中显示当前位置实例代码...
时间: 2024-02-05 15:11:14 浏览: 37
以下是一个基于HTML5的示例代码,可以自动获取用户的地理位置信息,并在地图中显示当前位置。
```html
<!DOCTYPE html>
<html>
<head>
<title>显示当前位置</title>
<meta charset="utf-8">
<style>
#map{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>显示当前位置</h1>
<div id="map"></div>
<script>
// 检查浏览器是否支持Geolocation API
if (navigator.geolocation) {
// 获取当前位置信息
navigator.geolocation.getCurrentPosition(function(position) {
// 获取经纬度
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 显示地图
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: latitude, lng: longitude}
});
// 在地图上添加标记
var marker = new google.maps.Marker({
position: {lat: latitude, lng: longitude},
map: map,
title: '当前位置'
});
}, function(error) {
// 获取位置信息失败
alert('获取位置信息失败:' + error.message);
});
} else {
// 浏览器不支持Geolocation API
alert('浏览器不支持Geolocation API');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</body>
</html>
```
需要注意的是,该示例代码中需要替换 `YOUR_API_KEY` 为你自己的 Google Maps API Key。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)