首先，我们需要使用百度地图的API来获取用户的位置信息。在代码中，我们创建了一个BMap.Geolocation对象，并调用getCurrentPosition方法来获取用户的经纬度信息。这样我们就可以得到用户所在地区的具体位置。
接下来，我们使用逆地理编码API来获取当前城市的详细地址信息。通过将用户的经纬度信息传递给BMap.Geocoder对象的getLocation方法，我们可以获取当前城市的详细地址信息。这样，我们就能够确定用户所在的城市。
然后，我们利用fetch方法发送POST请求到中国气象局的接口，请求当前城市的气温信息。我们传递用户的经纬度信息和一些其他参数，以获取当前城市的实时气温数据。获取到返回的数据后，我们将气温信息渲染到页面上，让用户可以直观地了解当前城市的气温情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="">
<title></title>
</head>
<body>
<p id="temperature"></p>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YlKTupxQdbmBT3dGUNVhdSFrDw89CGWc"></script>
<script>
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(res){
console.log(res);
var lat = res.latitude; // 纬度
var lng = res.longitude; // 经度
// 使用百度地图的逆地理编码API获取当前城市
var myGeo = new BMap.Geocoder();
myGeo.getLocation(new BMap.Point(lng, lat), function(result){
// 在这里可以获取到当前城市的详细地址信息
console.log(result.addressComponents.city);
// 发送请求获取当前城市的气温
fetch('http://data.cma.cn/kbweb/home/live', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
"lat": lat,
"lon": lng,
"type": "0"
}),
})
.then(response => response.json())
.then(data0 => {
console.log(data0);
var ds = data0.result.DS[0];
var tem = ds.TEM;
if (tem == '9999') {
tem = '--';
}
// 将气温渲染到页面上
document.getElementById('temperature').textContent = tem + '°C';
})
.catch(err => console.log('Request Failed', err));
});
});
</script>
</body>
</html>