微信小程序 (地址选择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 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
微信小程序静默登录的实现代码
Jan 08 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
javascript数据类型详解
2017/02/07 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python3处理含有中文的url方法
2018/05/10 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
浙江文明网签名寄语
2014/01/18 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
集体备课反思
2014/02/12 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
财产分割协议书
2016/03/22 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript