腳本之家服務器常用軟件

快捷導航

微信小程序地圖定位的實現(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)的文章就介紹到這了,更多相關微信小程序地圖定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序地圖定位的實現(xiàn)方法實例

目錄

前言

方法如下

總結：

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具