【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序如何獲取當(dāng)前位置經(jīng)緯度以及地圖顯示

這篇文章主要為大家展示了“微信小程序如何獲取當(dāng)前位置經(jīng)緯度以及地圖顯示”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓在下帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序如何獲取當(dāng)前位置經(jīng)緯度以及地圖顯示”這篇文章吧。最近剛開(kāi)始接觸微信小程序，在弄懂其結(jié)構(gòu)以及相關(guān)接口之后，準(zhǔn)備著手實(shí)現(xiàn)一個(gè)小程序，功能包括--獲取用戶當(dāng)前位置的經(jīng)緯度，在地圖上查看位置，通過(guò)地圖獲取不同位置的經(jīng)緯度。最近剛開(kāi)始接觸微信小程序，在弄懂其結(jié)構(gòu)以及相關(guān)接口之后，準(zhǔn)備著手實(shí)現(xiàn)一個(gè)小程序，功能包括--獲取用戶當(dāng)前位置的經(jīng)緯度，在地圖上查看位置，通過(guò)地圖獲取不同位置的經(jīng)緯度。微信小程序的主體部分包括：新增頁(yè)面需要在app.json進(jìn)行配置：

"pages":[

"pages/index/index",

"pages/location/location",

"pages/logs/logs"

]通過(guò)在視圖層調(diào)用bindtap與邏輯層中的方法匹配--實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)：視圖層

<view

class="location"

bindtap="locationViewTap">

<button>獲取用戶當(dāng)前位置</button>

</view>邏輯層

locationViewTap:

function(){

wx.navigateTo({

url:

'../location/location'

})

}通過(guò)在視圖層調(diào)用bindtap與邏輯層中的方法匹配--實(shí)現(xiàn)方法調(diào)用：視圖層

<button

bindtap="mapViewTap"

style="margin:10px">查看地圖</button>

<button

bindtap="chooseMapViewTap"

style="margin:10px">選擇位置</button>邏輯層

mapViewTap:function(){

wx.getLocation({

type:

'gcj02',

//返回可以用于wx.openLocation的經(jīng)緯度

success:

function(res)

{

console.log(res)

wx.openLocation({

latitude:

res.latitude,

longitude:

res.longitude,

scale:

28

})

}

})

}有關(guān)地圖位置的三個(gè)接口：(1)wx.getLocation(OBJECT)獲取當(dāng)前的地理位置、速度success返回參數(shù)：(2)wx.openLocation(OBJECT)

使用微信內(nèi)置地圖查看位置OBJECT參數(shù)說(shuō)明：(3)wx.chooseLocation(OBJECT)打開(kāi)地圖選擇位置success返回參數(shù)：實(shí)現(xiàn)效果利用getLocation獲取當(dāng)前位置的經(jīng)緯度坐標(biāo)，openLocation打開(kāi)微信內(nèi)置地圖查看

利用chooseLocation選取位置，并將位置信息的經(jīng)緯度實(shí)時(shí)響應(yīng)顯示注意事項(xiàng)：(1)利用getLocation()獲得的地圖參數(shù)信息只有兩個(gè)

利用chooselocati