微信小程序 (地址选择1)--选取搜索地点并显示效果


Posted in Javascript onDecember 17, 2019

效果:(直接复制代码,可查看效果)

可以通过拖动地图,搜索地址,选择地址,并将地址值传给文本框

微信小程序 (地址选择1)--选取搜索地点并显示效果

进入以下界面

微信小程序 (地址选择1)--选取搜索地点并显示效果

点击确定后。

微信小程序 (地址选择1)--选取搜索地点并显示效果

代码如下:

wxml:

<view class="box2">
  <view class="box2_left">收货地址</view>
  <input type="text" class="box2_right" placeholder="请选择收货地址" 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:

//移动选点
 onChangeAddress: function () {
  var _page = this;
  wx.chooseLocation({
   success: function (res) {
    _page.setData({
     chooseAddress: res.name
    });
   },
   fail: function (err) {
    console.log(err)
   }
  });
 },

这里显示在文本框的内容只是返回结果中的name,整个返回结果是下面这中形式的:

微信小程序 (地址选择1)--选取搜索地点并显示效果

wx.chooseLocation:在文档中的位置点这里

总结

以上所述是小编给大家介绍的微信小程序 (地址选择1)--选取搜索地点并显示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 #Javascript
JS实现打字游戏
Dec 17 #Javascript
js实现打字小游戏
Dec 17 #Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 #Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 #Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 #Javascript
js DOM的事件常见操作实例详解
Dec 16 #Javascript
You might like
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php错误日志简单配置方法
2016/07/11 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
详解Python核心对象类型字符串
2018/02/11 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
党员自我评价分享
2013/12/13 职场文书
大学生求职自我评价
2014/01/16 职场文书
高中自我评价范文
2014/01/27 职场文书
股东合作协议书范本
2014/04/14 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
推广普通话演讲稿
2014/05/23 职场文书
英语教研活动总结
2014/07/02 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
团代会邀请函
2015/02/02 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers