脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序选取搜索地点

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

 更新时间：2019年12月17日 09:36:22   作者：爱学习的程序媛  
这篇文章主要介绍了微信小程序 (地址选择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,整个返回结果是下面这中形式的：

在这里插入图片描述

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

总结

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

您可能感兴趣的文章:

相关文章

  • 硬盘浏览程序，保存成网页格式便可使用

    硬盘浏览程序，保存成网页格式便可使用

    硬盘浏览程序，保存成网页格式便可使用...
    2006-12-12
  • js实现文字跑马灯效果

    js实现文字跑马灯效果

    本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js使用ajax传值给后台,后台返回字符串处理方法

    js使用ajax传值给后台,后台返回字符串处理方法

    今天小编就为大家分享一篇js使用ajax传值给后台,后台返回字符串处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • echarts几个公司内部数据可视化图表必收藏

    echarts几个公司内部数据可视化图表必收藏

    最近公司有一个需求，要做一个数据可视化的页面，所有的图表都在下面，做这些都是本人自己写的，全部都是真是的项目中的代码，包含有柱状图、折线图、水球图以及散点图，这里直接打出来给大家练手，希望大家多多支持，如果这篇文章对您有用的话必须收藏
    2022-08-08
  • 阻止mousemove鼠标移动或touchmove触摸移动触发click点击事件

    阻止mousemove鼠标移动或touchmove触摸移动触发click点击事件

    这篇文章主要为大家介绍了阻止mousemove或touchmove与click事件同时触发技巧，一个按钮绑定了多个事件，所以就要想办法阻止 mouse 鼠标事件或 touch 触摸事件 与 click 事件同时触发，不然每次拖拽按钮后都会触发 click 事件，这显然是不友好的
    2023-06-06
  • 元素全屏的设置与监听实例

    元素全屏的设置与监听实例

    下面小编就为大家带来一篇元素全屏的设置与监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript中的onerror事件概述及使用

    JavaScript中的onerror事件概述及使用

    onerror事件用来协助处理页面中的JavaScript错误主要包括：Window.onerror事件,img载入错误，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
    2013-04-04
  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    js+html5获取用户地理位置信息并在Google地图上显示的方法

    这篇文章主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下
    2015-06-06
  • 解析微信JS-SDK配置授权，实现分享接口

    解析微信JS-SDK配置授权，实现分享接口

    这篇文章是微信开发的很多前置条件，包括了服务端基于JAVA的获取和缓存全局的access_token，获取和缓存全局的jsapi_ticket，以及前端配置授权组件封装，调用分享组件封装。需要的朋友可以看下
    2016-12-12
  • 详解uniapp如何处理图片加载过程中的错误

    详解uniapp如何处理图片加载过程中的错误

    这篇文章给大家详细介绍了uniapp如何处理图片加载过程中的错误,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-10-10

最新评论