JS获取当前所在城市的地址及气温

最新推荐文章于 2024-05-08 20:12:51 发布

山谷里的杂货铺

最新推荐文章于 2024-05-08 20:12:51 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_58528200/article/details/125424532

版权

需求：系统首页需要展示当前登录用户的所在地及气温

效果：

采用技术：使用百度地图api获取当前省市及经纬度，然后通过经纬度调用接口（http://data.cma.cn/kbweb/home/live）获取当前城市的气温

注：百度地图的ak需要申请

代码：public/index.html

<!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>
  <div id="app"></div>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=此处为百度地图申请的ak"></script>
  <script>
    var geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function(res){
      if (window.location.pathname === '/') {
        var lat = res.latitude  // 纬度
        var lng = res.longitude  // 经度
        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 => { 
          var ds = data0.result.DS[0];
          var tem = ds.TEM;
          if (tem == '9999') {
            tem = '--';
          }
          var portalData = {
            province: res.address.province, // 当前省
            city: res.address.city, // 当前市
            weather: tem + '°C' // 当前城市气温
          }
        })
        .catch(err => console.log('Request Failed', err))
      }
    })
  </script>
</body>

</html>