微信小程序 (地址选择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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
Python使用asyncio包处理并发详解
2017/09/09 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python属于跨平台语言码
2020/06/09 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
化学教师教学反思
2014/01/17 职场文书
企业军训感言
2014/02/08 职场文书
活动总结报告范文
2014/05/04 职场文书
说明书范文
2014/05/07 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
关于幸福的感言
2015/08/03 职场文书