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

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

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

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

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

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

getlocation.wxml：

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

getlocation.js：

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

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

點擊確定，獲得位置信息：

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

openlocation.wxml：

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

openlocation.js：

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

點擊地圖位置按鈕，首次調(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ào)用還需要獲得用戶的scope.userLocation授權(quán)：

選擇位置頁面如下：

選擇一個位置，點擊右上角確定，返回信息如下：

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

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

您可能感興趣的文章:

相關(guān)文章

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