您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“微信小程序怎么實現(xiàn)在地圖上顯示自己的位置”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“微信小程序怎么實現(xiàn)在地圖上顯示自己的位置”吧!
畫面截圖
index.wxml
<!--index.wxml-->
<view class="container">
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style=" width: 375px; height: 500px;"></map>
<text class="angle_text">{{location}}</text>
</view>
內(nèi)容很簡單,畫面上布置了一個map對象和text對象。
其中map對象分別指定了longitude,latitude和markers。相信你還記得:在雙重花括號{{}}包圍的部分是變量,它們的值在對應頁面的js文件中定義。
index.js
//index.js
//獲取應用實例
const app = getApp()
Page({
data: { //數(shù)據(jù)定義
longitude: 0, // 對應wxml文件中的longitude變量
latitude: 0, // 對應wxml文件中的latitude變量
location: ',', // 對應wxml文件中的location變量
markers: [{ // 對應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,
}]
});
}
})
},
})
這段代碼實現(xiàn)了生命周期函數(shù)onShow,它的核心是ws.getLocation,它的輸出通過傳遞的success:function來處理。處理的內(nèi)容很簡單,就是通過setData函數(shù)設定到各個數(shù)據(jù)上。
到此,相信大家對“微信小程序怎么實現(xiàn)在地圖上顯示自己的位置”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。