微信小程序地圖定位的實現(xiàn)方法實例
更新時間：2022年04月21日 11:30:39 作者：水星記_
小程序功能的強大想必使用過的人都知道,下面這篇文章主要給大家介紹了關于微信小程序地圖定位的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
地圖定位這個功能大家都很熟悉吧，那微信小程序中要怎么實現(xiàn)地圖定位呢，其實非常簡單，沒有大家想象中那么難，看完本篇文章，你也可以輕松實現(xiàn)這個小功能哦。
方法如下
1.首先呢你要有一個方法去觸發(fā)這個點擊事件，下面已經(jīng)寫好啦，非常簡單的兩行代碼。
<input placeholder="請選擇地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地圖選點</button>
2.接下來就到js了，我們要在data中聲明首次加載的經(jīng)度和維度，然后在聲明一個選點的位置。
data: {
latitude: 0, //首次加載維度
longitude: 0, //首次加載的經(jīng)度
mapName: "", //選點的位置
},
3.下面就是在moveToLocation事件中執(zhí)行地圖操作啦，主要是通過wx.chooseLocation方法，然后將拿到的值賦值給上面data中定義的mapName即可。
moveToLocation() {
let that = this
wx.chooseLocation({
success: function (res) {
console.log(res.name);
//賦值給data中的mapName
that.setData({
mapName: res.name
})
},
//錯誤信息
fail: function () {
console.log(err);
}
})
}
js完整代碼
Page({
data: {
latitude: 0, //首次加載維度
longitude: 0, //首次加載的經(jīng)度
mapName: "", //選點的位置
},
moveToLocation() {
let that = this
wx.chooseLocation({
success: function (res) {
console.log(res.name);
//賦值給data中的mapName
that.setData({
mapName: res.name
})
},
//錯誤信息
fail: function () {
console.log(err);
}
})
}
})
4.最后的最后我們需要在app.json文件中添加這么一段：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
},
5.展示
總結：
1.wxml文件中定義一個方法觸發(fā)點擊事件；
2.js文件在data中聲明首次加載的經(jīng)度和維度，然后聲明一個選點的位置用于在頁面展示選中的地址；
3.觸發(fā)moveToLocation事件方法，執(zhí)行地圖操作，通過wx.chooseLocation方法，將拿到地址的值賦值給data中定義的mapName；
4.在app.json文件中定義授權信息。
到此這篇關于微信小程序地圖定位實現(xiàn)的文章就介紹到這了,更多相關微信小程序地圖定位內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
基于aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人功能
這篇文章主要介紹了利用aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了Bootstrap三種表單布局的使用方法，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了redux處理異步action解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單
這篇文章主要介紹了javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單，實現(xiàn)JS年月日三級聯(lián)動下拉框選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
記得meta標簽當中有一個refresh的功能嗎？這是讓瀏覽的頁面刷新并可以轉到相應的頁面，如果刷新本頁的話就會造成重復的刷新，現(xiàn)在我們就試試用腳本來實現(xiàn)只讓頁面刷新一次.2009-07-07
這篇文章主要為大家詳細介紹了bootstrap實現(xiàn)二級下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)登錄窗體，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
在DOM里面操作textarea里面的字符，是比較麻煩的,本文將介紹一種比較簡單的方法，需要的朋友可以參考下2012-12-12
這篇文章主要給大家介紹了關于JavaScript中AOP的實現(xiàn)與應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
本文主要介紹了js常用的DOM方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02