微信小程序實例-獲取當前的地理位置、經緯度
微信小程序官方文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html
JS代碼
//index.js//獲取應用實例var app = getApp()Page({ data: { motto: '示例小程序-獲取當前地理位、速度', userInfo: {}, hasLocation:false, location:{} }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }), wx.getLocation( { success: function( res ) { console.log( res ) that.setData( { hasLocation: true, location: { longitude: res.longitude, latitude: res.latitude } }) } }) }})
index.wxml
<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <!-- <text class="user-motto">{{motto}}/n</text>--> <text>經度:{{location.longitude}}/n</text> <text>緯度:{{location.latitude}}</text> </view></view>
運行效果
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答