实习日志07

一、使用腾讯位置服务获取位置

注册Key，使用地图SDK及WebService API等产品与服务

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

1. 申请开发者密钥（key）：申请密钥

2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

     (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK

4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

5. 小程序示例

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})

二、通过搜索栏输入城市名查看该城市的天气情况

 finish:function(e){
    var _this = this;
    // console.log(e.detail.value);
    if (e.detail.value.length != 0){
      _this.weathertoday(e.detail.value);
      _this.weatherweekday(e.detail.value);
      // 清空输入框的值
      _this.setData({
        value:''
      })
    }
  },

三、实时播报今天天气和未来七天天气

// 天气api实况天气
  weathertoday: function (city) {
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/?version=v6',
      data: {
        'city': city
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res.data.date.substr(5, 5));
        _this.setData({
          weather: res.data,
          date: res.data.date.substr(5,5),
          humidity: res.data.humidity.substr(0,2)
        });
        console.log("今日天气 =>",_this.data.weather)
      }
    });
  },
  // 天气api实况天气
  weatherweekday: function (city) {
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/?version=v1',
      data: {
        'city': city
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        _this.setData({
          weatherweek: res.data
        });
        console.log("7日天气 =>",_this.data.weatherweek)
      }
    });
  }
})

 

练习：