微信小程序地圖定位的實現(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)的文章就介紹到這了,更多相關微信小程序地圖定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS中DOM元素的attribute與property屬性示例詳解
這篇文章主要給大家介紹了關于JS中DOM元素的attribute與property屬性的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起看看吧2018-09-09JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法
這篇文章主要介紹了JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法,實例分析了javascript函數(shù)傳遞參數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03深入探討如何利用Canvas實現(xiàn)圖片壓縮與Base64轉換
隨著Web應用的日益普及,圖片的處理和優(yōu)化已經(jīng)成為現(xiàn)代開發(fā)的關鍵部分,本文主要介紹了如何利用Canvas技術,將圖片進行壓縮,并將其轉換為Base64格式,感興趣的小伙伴可以學習下2023-10-10getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法
本文是對getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法。進行了分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11