原生JavaScript使用百度地图API获取当前城市气温的实例

首先，我们需要使用百度地图的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>