微信小程序3種位置API的使用方法詳解

2020-03-21 15:26:21

字體：大中小

來源：轉載

供稿：網友

獲取位置

獲取當前的地理位置、速度。當用戶離開小程序后，此接口無法調用；當用戶點擊“顯示在聊天頂部”時，此接口可繼續調用。

微信小程序,位置API

wx.getLocation(object)

微信小程序,位置API

<view class="container"> <button bindtap='getLocation'>獲取位置</button> <view wx:if="{{latitude !=''}}">  <view>緯度:{{latitude}}</view>  <view>經度:{{longitude}}</view>  <view>速度:{{speed}}</view>  <view>位置的精確度:{{accuracy}}</view>  <view>高度:{{altitude}}</view>  <view>垂直精度:{{accuracy}}</view>  <view>水平精度:{{accuracy}}</view> </view></view>

//index.js//獲取應用實例const app = getApp()Page({ data: {  latitude: '',  longitude: '',  speed: '',  accuracy: '',  altitude:'',  verticalAccuracy: '',  horizontalAccuracy:'' }, onLoad: function () { }, getLocation:function(){  var _this=this;  wx.getLocation({   type: 'wgs84',   success: function (res) {    var latitude = res.latitude    var longitude = res.longitude    var speed = res.speed    var accuracy = res.accuracy    var altitude = res.altitude    var verticalAccuracy = res.verticalAccuracy    var horizontalAccuracy = res.horizontalAccuracy    _this.setData({     latitude: latitude,     longitude: longitude,     speed: speed,     accuracy: accuracy,     altitude: altitude,     verticalAccuracy: verticalAccuracy,     horizontalAccuracy: horizontalAccuracy    })   }  }) }})

打開地圖選擇位置

wx.chooseLocation(OBJECT)

打開地圖選擇位置。

需要用戶授權 scope.userLocation

微信小程序,位置API

wx.chooseLocation(object)

微信小程序,位置API

<view class="container"> <button bindtap='getLocation'>打開地圖選擇位置</button> <view wx:if="{{address !=''}}">  <view>位置名稱:{{name}}</view>  <view>詳細地址:{{address}}</view>  <view>緯度:{{latitude}}</view>  <view>經度:{{longitude}}</view> </view></view>

//index.js//獲取應用實例const app = getApp()Page({ data: {  name: '',  address: '',  latitude: '',  longitude: '' }, onLoad: function () { }, getLocation:function(){  var _this=this;  wx.chooseLocation({   success: function (res) {    var name = res.name    var address = res.address    var latitude = res.latitude    var longitude = res.longitude    _this.setData({     name: name,     address: address,     latitude: latitude,     longitude: longitude    })   }  }) }})

?使用微信內置地圖查看位置

使用微信內置地圖查看位置。

微信小程序,位置API