微信小程序 (地址选择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 for循环设法提高性能
Feb 24 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
js实现圆形菜单选择器
Dec 03 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编程注意事项的小结
2013/04/27 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
岗位竞聘演讲稿
2014/01/10 职场文书
班长自荐书范文
2014/02/11 职场文书
法制宣传日活动总结
2014/04/29 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
海洋天堂观后感
2015/06/05 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers