本篇內(nèi)容主要講解“微信小程序怎么實(shí)現(xiàn)在地圖上顯示自己的位置”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)在地圖上顯示自己的位置”吧!
成都創(chuàng)新互聯(lián)專注于代縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。代縣網(wǎng)站建設(shè)公司,為代縣等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
畫面截圖
index.wxml
內(nèi)容很簡(jiǎn)單，畫面上布置了一個(gè)map對(duì)象和text對(duì)象。
其中map對(duì)象分別指定了longitude,latitude和markers。相信你還記得：在雙重花括號(hào){{}}包圍的部分是變量，它們的值在對(duì)應(yīng)頁(yè)面的js文件中定義。
index.js
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: { //數(shù)據(jù)定義
longitude: 0, // 對(duì)應(yīng)wxml文件中的longitude變量
latitude: 0, // 對(duì)應(yīng)wxml文件中的latitude變量
location: ',', // 對(duì)應(yīng)wxml文件中的location變量
markers: [{ // 對(duì)應(yīng)wxml文件中的markers變量
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}],
},
onShow: function() {
var that = this
wx.getLocation({
type: 'gcj02', // 返回 可以 用于 wx. openLocation 的 經(jīng)緯度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(res)
var location = latitude.toFixed(2) + ',' + longitude.toFixed(2)
that.setData({ longitude: longitude,
latitude: latitude,
location: location,
markers: [{latitude: latitude,
longitude: longitude,
}]
});
}
})
},
})
這段代碼實(shí)現(xiàn)了生命周期函數(shù)onShow，它的核心是ws.getLocation，它的輸出通過(guò)傳遞的success:function來(lái)處理。處理的內(nèi)容很簡(jiǎn)單，就是通過(guò)setData函數(shù)設(shè)定到各個(gè)數(shù)據(jù)上。
到此，相信大家對(duì)“微信小程序怎么實(shí)現(xiàn)在地圖上顯示自己的位置”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
