使用amap获取天气信息

已于 2023-02-27 16:49:09 修改
阅读量319 收藏
点赞数
分类专栏： Vue.js 高德地图 文章标签： vue.js javascript 前端 高德地图 高德定位
于 2023-02-16 16:36:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H5_QueenStyle12/article/details/129064777
版权

引用amap

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: '高德申请的开发者号',
    plugin: ['AMap.Weather','Amap.Geocoder','AMap.CitySearch'], // 天气
    v: '1.4.4',
    uiVersion: '1.0.11' // UI版本号
});

添加组件，使用城市定位，可以查看往期文章，获取ip定位

import { lazyAMapApiLoaderInstance } from 'vue-amap';
    export default {
        data () {
            return {
                weatherImg: require('@/assets/images/icon-weather/icon-3.png'),
                weatherObj: ''
            };
        },
        mounted () {
          let self = this;
          lazyAMapApiLoaderInstance.load().then(() => {
              AMap.plugin('AMap.CitySearch', function() {
                var citysearch = new AMap.CitySearch(); // 定位
                citysearch.getLocalCity((status, result) => {
                  if (status === 'complete' && result.info === 'OK') {
                    if (result && result.city && result.bounds) {
                      var cityinfo = result.city;
                      var weather = new AMap.Weather(); // 天气
                      weather.getLive(cityinfo, function(err, data) {
                        self.handleWeatherInfo(data);
                      });
                    }
                  }
                })
              });
          })

           // this.getCip();
        },
        computed: {

        },
        methods: {
            handleWeatherInfo(data) {
              switch (data.weather) {
                case '多云':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-3.png');
                  break;
                case '晴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-4.png');
                  break;
                case '阴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-1.png');
                  break;
                case '雷阵雨':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-11.png');
                  break;
                case '雨夹雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-9.png');
                  break;
                case '小雨':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-7.png');
                  break;
                case '小雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-6.png');
                  break;
                case '大雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-2.png');
                  break;
                case '雾':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '浮尘':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '沙尘暴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '中雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-8.png');
                  break;
                case '阵雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-10.png');
                  break;
              }
              this.curWeek =
                  '星期' + '日一二三四五六'.charAt(new Date(data.reporttime).getDay());
              this.curDay = new Date(data.reporttime).getDate();
              this.weatherObj = data;
              this.weatherObj.temperature_number = Number(this.weatherObj.temperature);
              this.$emit('getWeather', this.weatherObj);
            }
        }
   }

tips：如果不使用 AMap.plugin(‘AMap.CitySearch’, function() {})；这一层的话，经常报错CitySerach不是一个构造函数，所以推荐使用这种方法

CitySearch由于网络问题无法获取到城市信息，尝试过好几种办法

1、通过外部script 获取ip地址，进行城市解析


          getCip () {
            let url = "https://www.taobao.com/help/getip.php";
            this.$jsonp(
                url,
                // 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                {
                  callbackName: 'ipCallback',
                  dataType: 'jsonp', // 数据类型为jsonp
                  jsonp: 'callback',
                  // 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                  //  jsonpCallback: 'ipCallback',
                  type: 'GET',
                  async: false
                }
            ).then(res => {
              this.getCity(res.ip);
              // this.weather(res.adcode);
            });
          },
          getCity (cip) {
            this.$jsonp(
                'https://restapi.amap.com/v3/ip?ip=' +
                cip +
                '&output=json&key=高德地图开发者Key',
                // 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                {
                  dataType: 'jsonp', // 数据类型为jsonp
                  jsonp: 'callback',
                  // 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                  // jsonpCallback: 'list',
                  type: 'GET',
                  async: false
                }
            ).then(res => {
              this.weather(res.adcode);
            });
          },

          weather (code) {
            this.$jsonp(
                'https://restapi.amap.com/v3/weather/weatherInfo?city=' +
                code +
                '&key=高德地图开发者Key',
                // 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                {
                  dataType: 'jsonp', // 数据类型为jsonp
                  jsonp: 'callback',
                  // 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                  // jsonpCallback: 'list',
                  type: 'GET',
                  async: false
                }
            ).then(res => {
              var list = res.lives[0];
              switch (list.weather) {
                case '多云':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-3.png');
                  break;
                case '晴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-4.png');
                  break;
                case '阴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-1.png');
                  break;
                case '雷阵雨':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-11.png');
                  break;
                case '雨夹雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-9.png');
                  break;
                case '小雨':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-7.png');
                  break;
                case '小雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-6.png');
                  break;
                case '大雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-2.png');
                  break;
                case '雾':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '浮尘':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '沙尘暴':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-5.png');
                  break;
                case '中雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-8.png');
                  break;
                case '阵雪':
                  this.weatherImg = require('@/assets/images/icon-weather/icon-10.png');
                  break;
              }
              this.curWeek =
                  '星期' + '日一二三四五六'.charAt(new Date(list.reporttime).getDay());
              this.curDay = new Date(list.reporttime).getDate();
              this.weatherObj = list;
              this.weatherObj.temperature_number = Number(this.weatherObj.temperature);
              this.$emit('getWeather', this.weatherObj);
            });
          },

2、使用浏览器定位

// AMap.plugin('AMap.Geolocation', function() {
                      //   var geolocation = new AMap.Geolocation({
                      //     enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                      //     timeout: 10000, // 超过10秒后停止定位，默认：5s
                      //     buttonPosition: 'RB', // 定位按钮的停靠位置
                      //     zoomToAccuracy: false // 定位成功后是否自动调整地图视野到定位点
                      //   });
                      //   geolocation.getCurrentPosition(function(status, result) {
                      //     if (status == 'complete') {
                      //       console.log(result);
                      //       // onComplete(result);
                      //     } else {
                      //       self.$Message.error("请先开启浏览器定位");
                      //     }
                      //   });
                      // });

第二种方法即使能获取到城市经纬度，js代码中报错，没处理……，写死经纬度就可以。目前不知道原因。。

H5女王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html5获取高德地图定位天气的方法
11-21
注：使用的是的模块注入方式，适用各种前端单页面应用及H5 创建一个AMap.js文件 // AMap.js // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script')
vue-amap搜索定位，多边形遮罩，自定义点坐标, 获取天气
qq_44832960的博客
10-25 790
main.js里面配置 可以根据自己的样式进行修改 <template> <div class="map_address"> <div class="address-wrapper" :style="{width:'100%',height:'100%'}"> <div style="display:flex;align-items: center;"> <el-amap-search-box
【微信小程序】免费的高德地图api——获取天气（全过程）
weixin_60387745的博客
03-18 7628
【微信小程序】免费的高德地图api——获取天气（全过程）
使用高德地图API获取天气
qq_51468120的博客
11-22 7472
使用高德地图API获取天气
高德地图 天气预报查询
ooiuy450的专栏
04-07 9061
AMap.Weather 天气查询服务，提供城市/区县天气预报服务 高德地图为我们提供了天气预报的查询接口，通过该插件，我们可以获取到未来几天的天气预报详情，这对于想优化app与客户之间的联系是提供了极大的方便的。以下为官网api 由api我们可知，weather插件分别为我们提供了实时天气信息和未来4天的天气预况，通过该方法我们可以获取相应的对象进而获取相应的信息。由示例：<!doct
amap 获取 某地天气
xiaoheisboy的博客
06-27 575
amap 获取 某地天气 weather() { let that = this; AMap.plugin(‘AMap.Weather’, function () { var weather = new AMap.Weather(); weather.getForecast(‘北京市’, function (err, data) { console.log(data); }); }); },
vue中使用高德地图 vue-amap 常见配置
走走停停
06-06 2564
效果：
Vue和vue-amap来获取天气数据（高德地图）
qq_45915072的博客
07-18 92
需求：根据账号权限，是哪个县的展示哪个县的天气情况。main.js天气放入插件。
Vue和vue-amap加定位来获取天气数据（高德地图）
qq_45915072的博客
07-18 609
【代码】Vue和vue-amap加定位来获取天气数据（高德地图）
DeliberateWeather:走心天气，使用高德地图web服务api开发的安卓天气APP
05-14
配置获取天气信息接口的key 注册开发者账号后，去控制台创建一个应用，应用类型选择web服务API，拿到key，把key填到DeliberateWeather/app/src/main/java/com/toosame/weather/utils/HttpClient.java第29行那段用星...
高德地图 定位+天气
09-26
Android高德地图3D实现自动定位，获取天气相关信息。
AMap_Location_API_Lib_V1.3.0
12-16
高德定位API，开发过程中涉及到城市定位搞来的，可以进行定位和获取当地的天气信息
Leaflet.Weather:一个Leaflet插件，用于使用OpenWeatherMap API将天气小部件添加到地图
04-28
一个Leaflet插件，用于使用 API将天气小部件添加到地图 请参阅（当前正在运行。请参见下面的消息）。 重要说明： OpenWeatherMap API现在要求您获取API密钥。 因此，该插件不再起作用。 我正在进行更新，以为此插件...
高德天气服务api
qq_44871403的博客
05-27 4337
官网：https://lbs.amap.com/api/webservice/guide/api/weatherinfo 代码： @Slf4j public class AmapUtil { private static final RestTemplate REST_TEMPLATE = new RestTemplate(); private static final String AMAP_KEY; private static final String INFO = "O.
Python通过高德地图API批量获取目的地天气情况
weixin_45249324的博客
07-12 625
Python通过高德地图API批量获取目的地天气情况
web端首页获取当前位置，展示当前登录用户的气温
weixin_45799001的博客
07-13 468
1.参考高德地图api获取位置信息 地址https://developer.amap.com/api/jsapi-v2/guide/services/geolocation 2.参考高德地图api获取天气 地址https://developer.amap.com/api/jsapi-v2/guide/services/weather 3.引入高德 vue 包 4.参考代码如下...
微信小程序-使用高德获取实时天气和天气预报
aykkkkkkk的博客
12-16 3936
一、获取实时天气可以完全按照官方步骤操作（点链接可跳转）： 1.获取高德的key，获取实时天气数据时需要 2.设置安全通信域名，在小程序中记得刷新 不会设置可以点这里，第五步有写 3.获取实时天气数据，下图为获取到的实时天气数据 二、获取天气预报（高德只提供后三天的预报） 前面的准备步骤和获取实时天气一样，所以下面只放获取的代码。 ...
vue PC项目 使用高德API 获取位置和天气信息
aaassdf11的博客
06-08 1771
vue PC项目 使用高德API 获取位置和天气信息
vue数据大屏并发请求
最新发布
qq_60839348的博客
05-09 748
vue数据大屏并发请求
uniapp高德获取天气
06-11
要使用高德地图获取天气信息，需要先获取到当前位置的经纬度，然后使用高德天气API获取天气信息。以下是获取当前位置和天气信息的示例代码： ```javascript // 引入uni请求库 import uniRequest from 'uni-request'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值