微信小程序(十六)实战——微信小程序的百度地图的Api获取地理位置

版权声明:本文为博主原创文章,未经博主允许不得转载。交流联系QQ:634487911 https://blog.csdn.net/qq_38191191/article/details/81633059

   githubhttps://github.com/ChenPing168/-BaiduApi

使用百度地图的api来获取地位位置的信息

第一步:先到百度开放平台http://lbsyun.baidu.com申请ak
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

申请到ak后,在我的应用里就能查看到

然后下载文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download

第二步:引入JS模块

第三步:编辑代码

.js

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js');
Page({
  data: {
    weatherData: ''
  },
  onLoad: function () {
    var that = this;
    // 新建百度地图对象 
    var BMap = new bmap.BMapWX({
      ak: 'pDUmMVsgKG422Vg8zW5UGWNBTUAvcw9e'
    });
    var fail = function (data) {
      console.log(data)
    };
    var success = function (data) {
      var weatherData = data.currentWeather[0];
      weatherData = '城市:' + weatherData.currentCity + '\n' + 'PM2.5:' + weatherData.pm25 + '\n' + '日期:' + weatherData.date + '\n' + '温度:' + weatherData.temperature + '\n' + '天气:' + weatherData.weatherDesc + '\n' + '风力:' + weatherData.wind + '\n';
      that.setData({
        weatherData: weatherData
      });
    }
    // 发起weather请求 
    BMap.weather({
      fail: fail,
      success: success
    });
  }
})

.wxml

<view class="weather"> 
  <text>{{weatherData}}</text> 
</view>

效果:

展开阅读全文

没有更多推荐了,返回首页