快捷導(dǎo)航

微信小程序?qū)W習(xí)筆記之獲取位置信息操作圖文詳解

更新時(shí)間：2019年03月29日 10:48:37 作者：李維山

這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之獲取位置信息操作,結(jié)合實(shí)例形式分析了微信小程序獲取位置信息的原理、步驟及相關(guān)操作注意事項(xiàng),并結(jié)合圖文形式予以說明,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)W習(xí)筆記之獲取位置信息操作。分享給大家供大家參考，具體如下：

前面介紹了微信小程序文件上傳、下載操作。這里分析一下獲取位置信息操作。

【獲取當(dāng)前位置信息】wx.getLocation()

getlocation.wxml：

<view>
 <button bindtap="getlocation">獲取位置</button>
</view>

getlocation.js：

Page({
 getlocation: function () {
  wx.getLocation({
   type: 'wgs84', //wgs84返回gps坐標(biāo)，gcj02返回國測(cè)局坐標(biāo)
   success: function(res) {
    console.log(res)
   }
  })
 }
})

點(diǎn)擊獲取位置按鈕，首次調(diào)用需要獲得用戶的scope.userLocation授權(quán)：

點(diǎn)擊確定，獲得位置信息：

【使用微信內(nèi)置地圖查看位置】 wx.openLocation()

openlocation.wxml：

<view>
 <button bindtap="openlocation">地圖位置</button>
</view>

openlocation.js：

Page({
 openlocation: function () {
  //首先調(diào)用wx.getLocation獲得當(dāng)前位置經(jīng)緯度
  wx.getLocation({
   type: 'gcj02', //wx.openLocation可用坐標(biāo)系
   success(res) {
    const latitude = res.latitude
    const longitude = res.longitude
    wx.openLocation({
     latitude, //緯度
     longitude, //經(jīng)度
     scale: 18, //縮放比例:5~18
     name: '北京', //位置名
     address: '挺好', //地址詳細(xì)說明
     success: function (res) {
      console.log(res)
     }
    })
   }
  })
 }
})

點(diǎn)擊地圖位置按鈕，首次調(diào)用也需要獲得用戶的scope.userLocation授權(quán)：

打開地圖獲得位置如下：

返回成功信息：

【打開地圖選擇位置】 wx.chooseLocation()

chooselocation.wxml：

<view>
 <button bindtap="chooselocation">選擇位置</button>
</view>

chooselocation.js：

Page({
 chooselocation: function () {
  wx.chooseLocation({
   success: function (res) {
    console.log(res)
   }
  })
 }
})

點(diǎn)擊選擇位置按鈕，首次調(diào)用還需要獲得用戶的scope.userLocation授權(quán)：

選擇位置頁面如下：

選擇一個(gè)位置，點(diǎn)擊右上角確定，返回信息如下：

（經(jīng)、緯度使用 gcj02 國測(cè)局坐標(biāo)系）

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

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)可以點(diǎn)擊收縮或張開的懸浮窗
這篇文章主要介紹了js實(shí)現(xiàn)可以點(diǎn)擊收縮或張開的懸浮窗效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
用按鈕控制iframe顯示的網(wǎng)頁實(shí)現(xiàn)方法
在iframe中顯示的網(wǎng)頁已經(jīng)是一件平凡無奇的事了，不過可能依然有很多的童鞋沒不知所措吧，沒關(guān)系，因?yàn)楸疚牡某霈F(xiàn)將會(huì)帶你脫離苦海，感性的朋友可以了解下啊，或許對(duì)你有所幫助
2013-02-02
JavaScript中的索引數(shù)組、關(guān)聯(lián)數(shù)組和靜態(tài)數(shù)組、動(dòng)態(tài)數(shù)組講解
這篇文章主要介紹了JavaScript中的索引數(shù)組、關(guān)聯(lián)數(shù)組和靜態(tài)數(shù)組、動(dòng)態(tài)數(shù)組講解,本文介紹了從數(shù)組的下標(biāo)分為索引數(shù)組、關(guān)聯(lián)數(shù)組、從對(duì)數(shù)據(jù)的存儲(chǔ)分為靜態(tài)數(shù)組、動(dòng)態(tài)數(shù)組,并給出了示例,需要的朋友可以參考下
2014-11-11
js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)
本文主要介紹了js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-04-04
js中遍歷Map對(duì)象的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s中遍歷Map對(duì)象的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
js操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox
下面小編就為大家?guī)硪黄猨s操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
詳解webpack-dev-server的簡單使用
本篇文章主要介紹了詳解webpack-dev-server的簡單使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件詳解
這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件,這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件的相關(guān)資料,需要的朋友可以參考下
2024-10-10
JavaScript實(shí)現(xiàn)商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
uniapp使用百度地圖的保姆式教學(xué)(適合初學(xué)者!)
公司項(xiàng)目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學(xué),文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03