首頁 > 文章 > 微信小程式 > 微信小程式之獲取目前位置經緯度以及地圖顯示

微信小程式之獲取目前位置經緯度以及地圖顯示

不言原創: 2018-06-23 09:22:3810127瀏覽

這篇文章主要介紹了關於微信小程式之獲取當前位置經緯度以及地圖顯示，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

#最近剛開始接觸微信小程序，在弄清楚其結構以及相關接口之後，準備著手實現一個小程序，功能包括--獲取用戶當前位置的經緯度，在地圖上查看位置，通過地圖獲取不同位置的經緯度。

最近剛開始接觸微信小程序，在弄清楚其結構以及相關接口之後，準備著手實現一個小程序，功能包括--獲取用戶當前位置的經緯度，在地圖上查看位置，通過地圖取得不同位置的經緯度。

微信小程式的主體部分包括：

#新增頁面需要在app.json進行設定：

 "pages":[
  "pages/index/index",
  "pages/location/location",
  "pages/logs/logs"
 ]

透過在視圖層呼叫bindtap與邏輯層中的方法匹配--實現頁面跳轉：

視圖層

 <view class="location" bindtap="locationViewTap">
  <button>获取用户当前位置</button>
 </view>

邏輯層

 locationViewTap: function(){
  wx.navigateTo({
   url: &#39;../location/location&#39;
  })
 }

#透過在視圖層呼叫bindtap與邏輯層中的方法匹配--實作方法呼叫：

檢視層

  <button bindtap="mapViewTap" style="margin:10px">查看地图</button>
  <button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>

邏輯層

 mapViewTap:function(){
    wx.getLocation({
     type: &#39;gcj02&#39;, //返回可以用于wx.openLocation的经纬度
     success: function(res) {
      console.log(res)
      wx.openLocation({
       latitude: res.latitude,
       longitude: res.longitude,
       scale: 28
      })
    }
   })
 }

有關地圖位置的三個介面：

(1) wx.getLocation(OBJECT) 取得目前的地理位置、速度

success回傳參數：

latitude	緯度，浮點數，範圍為-90~90，負數表示南緯
longitude	經度，浮點數，範圍為-180~180，負數表示西經
speed	速度，浮點數，單位m/s

##accuracy位置的精確度參數類型必填說明latitudeFloat是緯度，範圍為-90~90，負數表示南緯#longitudeFloat是經度，範圍為-180~180，負數表示西經#scaleINT否#縮放比例，範圍5~18，預設為18##否位址的詳細說明successFunction否介面呼叫成功的回呼函數fail


	(2) wx.openLocation(OBJECT) 使用微信內建地圖檢視位置	# OBJECT參數說明：




##name	String	否	位置名稱
#address	String

Function

#否

#介面呼叫失敗的回呼函數completeFunction否介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）name位置名稱



#(3) wx .chooseLocation(OBJECT) 開啟地圖選擇位置	success回傳參數：

############################################## #####address######詳細位址############latitude######緯度，浮點數，範圍為-90~90，負數表示南緯# ###########longitude######經度，浮點數，範圍為-180~180，負數表示西經############

實現效果

利用getLocation取得目前位置的經緯度座標，openLocation開啟微信內建地圖檢視

利用chooseLocation選取位置，並將位置資訊的經緯度即時回應顯示

##注意事項：

(1) 使用getLocation()所獲得的地圖參數資訊只有兩個

利用chooselocation回傳的參數如下：

##(2) this.setData修改json裡面的值

邏輯層中的json資料可以透過WXML檔{{json}}顯示出來：

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

微信小程式之獲取目前位置經緯度以及地圖顯示

相關文章