快捷導(dǎo)航

微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能

更新時(shí)間：2019年01月22日 14:22:36 作者：Rattenking

這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

效果圖

實(shí)現(xiàn)原理

采用高德地圖微信小程序開發(fā)API（getWeather），如果 city 屬性的值為空（或者沒有city屬性），默認(rèn)返回定位位置的天氣數(shù)據(jù)；如果 city 不為空，則返回 city 指定位置的天氣數(shù)據(jù)。

WXML

<view class="map-weather">
 <view><text>城市：</text>{{address}}</view>
 <view><text>天氣：</text>{{weather}}</view>
 <view><text>溫度：</text>{{temperature}}℃</view>
 <view><text>風(fēng)力：</text>{{windpower}}級(jí)</view>
 <view><text>濕度：</text>{{humidity}}%</view>
 <view><text>風(fēng)向：</text>{{winddirection}}</view>
</view>

JS

const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
 data: {
 address:'',
 weather:'',
 temperature:'',
 humidity:'',
 windpower:'',
 winddirection:''
 },
 onLoad(){
 var _this = this;
 var myAmap = new amap.AMapWX({ key: key });
 myAmap.getWeather({
  type: 'live',
  success(data) {
  if(data.city){
   _this.setData({
   address: data.liveData.city,
   humidity: data.liveData.humidity,
   temperature: data.liveData.temperature,
   weather: data.liveData.weather,
   winddirection: data.liveData.winddirection,
   windpower: data.liveData.windpower
   })
  }
  },
  fail() {
  wx.showToast({ title: '失??！' })
  }
 })
 }
})

WXSS

page{
 width: 100%;
 height: 100%;
 background-color: lightseagreen;
 color:#fff;
}
.map-weather{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}
.map-weather view{
 height: 100rpx;
 line-height: 100rpx;
 font-size: 30rpx;
}

另外，本站在線工具小程序上有一款天氣查詢工具，還添加了城市選擇的功能，感興趣的朋友可以掃描如下小程序碼查看：

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js print打印網(wǎng)頁指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s print打印網(wǎng)頁指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒有豐富的工具和庫可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問題。此外，可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。
2008-05-05
一文教你如何優(yōu)雅的使用WebSocket
WebSocket最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Javascript之面向?qū)ο?-封裝
本篇文章通過具體實(shí)例，對(duì)Javascript的封裝過程進(jìn)行案例分析，有助于對(duì)其代碼實(shí)現(xiàn)的理解與學(xué)習(xí)。下面就隨小編一起來看看吧
2016-12-12
Vue自定義日歷小控件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue自定義日歷小控件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
js 判斷瀏覽器類型去全角、半角空格自動(dòng)關(guān)閉當(dāng)前窗口
去全角、半角空格自動(dòng)關(guān)閉當(dāng)前窗口等實(shí)現(xiàn)函數(shù)。
2009-04-04
淺析基于WEB前端頁面的頁面內(nèi)容搜索的實(shí)現(xiàn)思路
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼，需要的朋友可以參考下
2014-06-06
淺析js實(shí)現(xiàn)網(wǎng)頁截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁截圖的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
js獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JS?中在嚴(yán)格模式下?this?的指向問題
這篇文章主要介紹了JS?中在嚴(yán)格模式下this的指向問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-09-09