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

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

 更新時間:2022年04月21日 11:30:39   作者:水星記_  
小程序功能的強大想必使用過的人都知道,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖定位的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

方法如下

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

<input placeholder="請選擇地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地圖選點</button>

2.接下來就到j(luò)s了,我們要在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.展示

總結(jié):

1.wxml文件中定義一個方法觸發(fā)點擊事件;

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

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

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

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

相關(guān)文章

  • JavaScript打開本地文件夾的4種方法舉例

    JavaScript打開本地文件夾的4種方法舉例

    這篇文章主要給大家介紹了關(guān)于JavaScript打開本地文件夾的4種方法,JavaScript在前端開發(fā)中是一種使用非常廣泛的編程語言,常用于實現(xiàn)網(wǎng)頁中的交互和動態(tài)效果,需要的朋友可以參考下
    2023-07-07
  • JS中DOM元素的attribute與property屬性示例詳解

    JS中DOM元素的attribute與property屬性示例詳解

    這篇文章主要給大家介紹了關(guān)于JS中DOM元素的attribute與property屬性的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起看看吧
    2018-09-09
  • JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法

    JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法

    這篇文章主要介紹了JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法,實例分析了javascript函數(shù)傳遞參數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • JS實現(xiàn)標(biāo)簽頁效果(配合css)

    JS實現(xiàn)標(biāo)簽頁效果(配合css)

    實現(xiàn)的效果是當(dāng)鼠標(biāo)移到某一個標(biāo)簽的時候,在下面的內(nèi)容區(qū)顯示對應(yīng)的內(nèi)容,并且相應(yīng)標(biāo)簽的顏色需要改變,這樣的效果是CSS和JS配合實現(xiàn)的,下面我們就來看看具體代碼
    2013-04-04
  • 深入探討如何利用Canvas實現(xiàn)圖片壓縮與Base64轉(zhuǎn)換

    深入探討如何利用Canvas實現(xiàn)圖片壓縮與Base64轉(zhuǎn)換

    隨著Web應(yīng)用的日益普及,圖片的處理和優(yōu)化已經(jīng)成為現(xiàn)代開發(fā)的關(guān)鍵部分,本文主要介紹了如何利用Canvas技術(shù),將圖片進(jìn)行壓縮,并將其轉(zhuǎn)換為Base64格式,感興趣的小伙伴可以學(xué)習(xí)下
    2023-10-10
  • ES6新特性之變量和字符串用法示例

    ES6新特性之變量和字符串用法示例

    這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項,需要的朋友可以參考下
    2017-04-04
  • 詳解JavaScript中的作用域鏈與閉包

    詳解JavaScript中的作用域鏈與閉包

    這篇文章主要為大家詳細(xì)介紹一下JavaScript中的作用域鏈與閉包的使用,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)JavaScript有一定的幫助,需要的可以參考一下
    2022-11-11
  • JS繪制微信小程序畫布時鐘

    JS繪制微信小程序畫布時鐘

    微信小程序官方組件也提供了畫布功能,下面分享一下如何創(chuàng)建微信小程序畫布時鐘
    2016-12-12
  • getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法

    getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法

    本文是對getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法。進(jìn)行了分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • 關(guān)于js注冊事件的常用方法

    關(guān)于js注冊事件的常用方法

    為了兼容各種瀏覽器,今天沒事特意復(fù)習(xí)了一下js原生事件特性,對其封裝一下。
    2013-04-04

最新評論