快捷導(dǎo)航

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

更新時(shí)間：2022年04月21日 11:30:39 作者：水星記_

小程序功能的強(qiáng)大想必使用過(guò)的人都知道,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖定位的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

地圖定位這個(gè)功能大家都很熟悉吧，那微信小程序中要怎么實(shí)現(xiàn)地圖定位呢，其實(shí)非常簡(jiǎn)單，沒(méi)有大家想象中那么難，看完本篇文章，你也可以輕松實(shí)現(xiàn)這個(gè)小功能哦。

方法如下

1.首先呢你要有一個(gè)方法去觸發(fā)這個(gè)點(diǎn)擊事件，下面已經(jīng)寫(xiě)好啦，非常簡(jiǎn)單的兩行代碼。

<input placeholder="請(qǐng)選擇地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地圖選點(diǎn)</button>

2.接下來(lái)就到j(luò)s了，我們要在data中聲明首次加載的經(jīng)度和維度，然后在聲明一個(gè)選點(diǎn)的位置。

data: {
        latitude: 0, //首次加載維度
        longitude: 0, //首次加載的經(jīng)度
        mapName: "", //選點(diǎn)的位置
    },

3.下面就是在moveToLocation事件中執(zhí)行地圖操作啦，主要是通過(guò)wx.chooseLocation方法，然后將拿到的值賦值給上面data中定義的mapName即可。

moveToLocation() {
        let that = this
        wx.chooseLocation({
            success: function (res) {
                console.log(res.name);
                //賦值給data中的mapName
                that.setData({
                    mapName: res.name
                })
            },
            //錯(cuò)誤信息
            fail: function () {
                console.log(err);
            }
        })
    }

js完整代碼

Page({
    data: {
        latitude: 0, //首次加載維度
        longitude: 0, //首次加載的經(jīng)度
        mapName: "", //選點(diǎn)的位置
    },
    moveToLocation() {
        let that = this
        wx.chooseLocation({
            success: function (res) {
                console.log(res.name);
                //賦值給data中的mapName
                that.setData({
                    mapName: res.name
                })
            },
            //錯(cuò)誤信息
            fail: function () {
                console.log(err);
            }
        })
    }
})

4.最后的最后我們需要在app.json文件中添加這么一段：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示"
    }
  },

5.展示

總結(jié)：

1.wxml文件中定義一個(gè)方法觸發(fā)點(diǎn)擊事件；

2.js文件在data中聲明首次加載的經(jīng)度和維度，然后聲明一個(gè)選點(diǎn)的位置用于在頁(yè)面展示選中的地址；

3.觸發(fā)moveToLocation事件方法，執(zhí)行地圖操作，通過(guò)wx.chooseLocation方法，將拿到地址的值賦值給data中定義的mapName；

4.在app.json文件中定義授權(quán)信息。

到此這篇關(guān)于微信小程序地圖定位實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序地圖定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

目錄

前言

方法如下

總結(jié)：

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具