web端项目根据城市获取城市天气信息

一、项目需求

          在web页面，根据当前城市显示当天天气情况，比如：深圳市，多云。

二、需求分析

          本来以为这个需求很简单的(其实应该也是很简单，只不过自己对天气和地图这部分不熟悉而已)，参考了网上的一些资源，发现踩了一些坑，在这记录一下。

           这个需求有2点，需要2个接口就可以了：

（1）获取天气的接口：

       网上有很多接口，比如和风天气接口，这个接口要自己注册私钥，比较麻烦。由于项目对天气要求不高，我选择了比较简单的公用接口：http://wthrcdn.etouch.cn/weather_mini?city=深圳

（2）获取城市的接口：

        在网上百度了下，很多人推荐某度地图，我也接入用了下，踩了很多坑之后，终于接入成功，结果获取的城市一直是“全国”, 真让人无语。最终只能作罢，换高德地图。

三、接口接入

   1.获取天气接口

      这个就不多说了，取到数据，直接解析就可以了，当然网上反馈获取信息乱码，我用的axios获取的（推荐用这个，返回的数据是json格式，我也用过jQuery获取，数据不是json格式），获取到的数据没出现乱码，大家如果遇到，可以自行百度一下。

获取的数据格式：

2.获取城市接口

   我这使用的高德地图接口，这里简单介绍一下：

（1）注册账号(如果没有的话)：高德地图官网

（2）创建key:  控制台 -- 应用管理 --- 创建新应用 -- 添加key

(3) 调用

    由于我这个一进入页面就要获取，官网的api提供了js的异步获方法，获取AMap

官网api截图如下：

通过ip地址去定位

结合这2个api，实习方法：

    获取AMap类：

//接口回调函数
window.onLoad  = function(){
    AMap.plugin('AMap.CitySearch', function() {
          var citySearch = new AMap.CitySearch()
          citySearch.getLocalCity(function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // 查询成功

              //获取当前城市天气信息
              let url = 'http://wthrcdn.etouch.cn/weather_mini?city=' + result.city
              axios.get(url).then((res) => {
                 ......
              })
            }
          })
     })
}

//通过javaScript获取AMap对象
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

      这篇文章主要用于记录自己踩的一些坑，同时也希望能帮助到一些跟我一样需要的人，都是个人经验总结，大神轻喷，欢迎探讨。