微信小程序之百度地圖API

最近給我的小程序增加了天氣預(yù)報的功能,采用的是Baidu地圖的小程序API。

百度地圖微信小程序JavaScript API 為小程序而生,幫助開發(fā)者在微信小程序中快速便捷的獲取百度豐富的數(shù)據(jù)資源,提供諸如POI查詢、模糊查詢、地址轉(zhuǎn)換和天氣查詢功能。

該套API全面支持HTTPS請求,且免費對外開放。您需先申請密鑰(ak)才可使用。

引入JS模塊

在項目根目錄下新建一個路徑,下載百度地圖微信小程序JavaScript API,解壓后得到 bmap-xw.js 文件,將其拷貝到新建的路徑下,安裝完成。

如下圖所示,新建路徑 "libs" ,將 bmap-xw.js 文件拷貝至 "libs" 路徑下。

天氣查詢

根據(jù)經(jīng)緯度/城市名查詢天氣情況,支持實時天氣、天氣預(yù)報。

默認檢索當(dāng)前定位城市的天氣信息,也可以通過參數(shù)設(shè)置查詢指定位置的天氣。

檢索結(jié)果包含當(dāng)前實時天氣的重要數(shù)據(jù)和完整數(shù)據(jù)(如:穿衣、洗車指數(shù),未來幾天的天氣等)兩部分。方便開發(fā)者進行自定義開發(fā)。

實現(xiàn)方法

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

在以下的代碼中,首先引用百度地圖微信小程序JavaScript API模塊,然后調(diào)用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'+'風(fēng)力:'+weatherData.wind+'\n';that.setData({weatherData:weatherData});}

// 發(fā)起weather請求

BMap.weather({

fail:fail,

success:success});

}})

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評論 25 709
  • 幾年前的自己每天都忙忙碌碌,可我覺得很充實,反復(fù)全世界都圍著我轉(zhuǎn),我是一個很幸福的人,雖然,工作都落在我一個人身上...
    哄哄你閱讀 195評論 0 0
  • 我們每天刷牙都會用到牙膏,牙膏的種類是五花八門,不同的牙膏有不同的功效,那我們怎樣挑選牙膏呢? 超市的牙膏分為普通...
    牙齒護衛(wèi)閱讀 748評論 0 5

友情鏈接更多精彩內(nèi)容