微信小程序 (地址選擇1)--選取搜索地點(diǎn)并顯示效果
更新時(shí)間：2019年12月17日 09:36:22 作者：愛學(xué)習(xí)的程序媛
這篇文章主要介紹了微信小程序 (地址選擇1)--選取搜索地點(diǎn)并顯示效果,實(shí)現(xiàn)思路是通過拖動(dòng)地圖，搜索地址，選擇地址并將地址值傳給文本框，具體實(shí)例代碼跟隨小編一起看看吧
效果：（直接復(fù)制代碼，可查看效果）
可以通過拖動(dòng)地圖，搜索地址，選擇地址，并將地址值傳給文本框
進(jìn)入以下界面
點(diǎn)擊確定后。
代碼如下：
wxml:
<view class="box2">
<view class="box2_left">收貨地址</view>
<input type="text" class="box2_right" placeholder="請(qǐng)選擇收貨地址" bindtap="onChangeAddress" value='{{chooseAddress}}'></input>
<view class="fuhao" bindtap="onChangeAddress">></view>
</view>
wxss:
.box2{
width: 680rpx;
min-height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: solid 2rpx #D7D7D7;
}
.box2_left{
width: 180rpx;
font-size: 15px;
color: #000000;
}
.box2_right{
width: 406rpx;
min-height: 90rpx;
display: flex;
align-items: center;
font-size: 14px;
}
.fuhao{
width: 70rpx;
height:90rpx;
font-size: 25px;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
js:
//移動(dòng)選點(diǎn)
onChangeAddress: function () {
var _page = this;
wx.chooseLocation({
success: function (res) {
_page.setData({
chooseAddress: res.name
});
},
fail: function (err) {
console.log(err)
}
});
},
這里顯示在文本框的內(nèi)容只是返回結(jié)果中的name,整個(gè)返回結(jié)果是下面這中形式的：
wx.chooseLocation:在文檔中的位置點(diǎn)這里
總結(jié)
以上所述是小編給大家介紹的微信小程序 (地址選擇1)--選取搜索地點(diǎn)并顯示效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
硬盤瀏覽程序，保存成網(wǎng)頁格式便可使用...2006-12-12
本文主要介紹了js實(shí)現(xiàn)文字超過顯示寬度每間隔1s自動(dòng)向左滾動(dòng)顯示的跑馬燈效果，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法
今天小編就為大家分享一篇js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
echarts幾個(gè)公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個(gè)需求，要做一個(gè)數(shù)據(jù)可視化的頁面，所有的圖表都在下面，做這些都是本人自己寫的，全部都是真是的項(xiàng)目中的代碼，包含有柱狀圖、折線圖、水球圖以及散點(diǎn)圖，這里直接打出來給大家練手，希望大家多多支持，如果這篇文章對(duì)您有用的話必須收藏2022-08-08
阻止mousemove鼠標(biāo)移動(dòng)或touchmove觸摸移動(dòng)觸發(fā)click點(diǎn)擊事件
這篇文章主要為大家介紹了阻止mousemove或touchmove與click事件同時(shí)觸發(fā)技巧，一個(gè)按鈕綁定了多個(gè)事件，所以就要想辦法阻止 mouse 鼠標(biāo)事件或 touch 觸摸事件 與 click 事件同時(shí)觸發(fā)，不然每次拖拽按鈕后都會(huì)觸發(fā) click 事件，這顯然是不友好的2023-06-06
下面小編就為大家?guī)硪黄厝恋脑O(shè)置與監(jiān)聽實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
onerror事件用來協(xié)助處理頁面中的JavaScript錯(cuò)誤主要包括：Window.onerror事件,img載入錯(cuò)誤，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-04-04
js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法
這篇文章主要介紹了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法,涉及html5元素的操作技巧,需要的朋友可以參考下2015-06-06
解析微信JS-SDK配置授權(quán)，實(shí)現(xiàn)分享接口
這篇文章是微信開發(fā)的很多前置條件，包括了服務(wù)端基于JAVA的獲取和緩存全局的access_token，獲取和緩存全局的jsapi_ticket，以及前端配置授權(quán)組件封裝，調(diào)用分享組件封裝。需要的朋友可以看下2016-12-12
這篇文章給大家詳細(xì)介紹了uniapp如何處理圖片加載過程中的錯(cuò)誤,文章通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10