微信小程序之百度地图API

最近给我的小程序增加了天气预报的功能,采用的是Baidu地图的小程序API。

百度地图微信小程序JavaScript API 为小程序而生,帮助开发者在微信小程序中快速便捷的获取百度丰富的数据资源,提供诸如POI查询、模糊查询、地址转换和天气查询功能。

该套API全面支持HTTPS请求,且免费对外开放。您需先申请密钥(ak)才可使用。

引入JS模块

在项目根目录下新建一个路径,下载百度地图微信小程序JavaScript API,解压后得到 bmap-xw.js 文件,将其拷贝到新建的路径下,安装完成。

如下图所示,新建路径 "libs" ,将 bmap-xw.js 文件拷贝至 "libs" 路径下。

天气查询

根据经纬度/城市名查询天气情况,支持实时天气、天气预报。

默认检索当前定位城市的天气信息,也可以通过参数设置查询指定位置的天气。

检索结果包含当前实时天气的重要数据和完整数据(如:穿衣、洗车指数,未来几天的天气等)两部分。方便开发者进行自定义开发。

实现方法

打开微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码。

在以下的代码中,首先引用百度地图微信小程序JavaScript API模块,然后调用BMapWX.weather方法进行天气信息的检索。

// 引用百度地图微信小程序JSAPI模块

varbmap=require('../../libs/bmap-wx.js');

Page({data:{weatherData:''},onLoad:function(){

varthat=this;

// 新建百度地图对象

varBMap=newbmap.BMapWX({ak:'您的ak'});

varfail=function(data){console.log(data)};varsuccess=function(data){varweatherData=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});

}})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,041评论 25 709
  • 几年前的自己每天都忙忙碌碌,可我觉得很充实,反复全世界都围着我转,我是一个很幸福的人,虽然,工作都落在我一个人身上...
    哄哄你阅读 1,163评论 0 0
  • 我们每天刷牙都会用到牙膏,牙膏的种类是五花八门,不同的牙膏有不同的功效,那我们怎样挑选牙膏呢? 超市的牙膏分为普通...
    牙齿护卫阅读 3,885评论 0 5