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

相关文章

  • JavaScript Event事件学习第一章 Event介绍

    JavaScript Event事件学习第一章 Event介绍

    Events是每一个JavaScript程序核心。什么是事件处理,它有什么问题和怎样写出跨浏览器的代码,我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。
    2010-02-02
  • 浅谈js数据类型判断与数组判断

    浅谈js数据类型判断与数组判断

    下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • SpringMVC restful 注解之@RequestBody进行json与object转换

    SpringMVC restful 注解之@RequestBody进行json与object转换

    这篇文章主要介绍了SpringMVC restful 注解之@RequestBody进行json与object转换的相关资料,需要的朋友可以参考下
    2015-12-12
  • 原生js结合html5制作小飞龙的简易跳球

    原生js结合html5制作小飞龙的简易跳球

    这篇文章主要介绍了原生js结合html5制作小飞龙的简易跳球的方法和代码分享,推荐给大家,有需要的小伙伴可以参考下。
    2015-03-03
  • Javascript处理DOM元素事件实现代码

    Javascript处理DOM元素事件实现代码

    DOM元素都有一些标准事件,一般使用时只要使用onclick=function的方式就可以了,但是当需要为DOM元素添加多个事件,删除事件,或在用Javascript封装控件的时候,为封装的控件添加自定义事件的时候
    2012-05-05
  • 探索Javascript中this的奥秘

    探索Javascript中this的奥秘

    本文介绍了JavaScript中的this关键字在各种情况下的含义,实例都很简单,这样更能有助于加深理解。虽然这只是js中一个很小的概念,但借此我们可以了解js中函数的执行环境,充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
    2016-12-12
  • 如何为你的JS项目添加智能提示与类型检查详解

    如何为你的JS项目添加智能提示与类型检查详解

    这篇文章主要给大家介绍了关于如何为你的JS项目添加智能提示与类型检查的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JavaScript实现页面跳转的5种方法总结

    JavaScript实现页面跳转的5种方法总结

    在前台开发中会涉及页面跳转的问题,下面这篇文章主要给大家总结介绍了关于JavaScript实现页面跳转的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • js如何实现点击标签文字,文字在文本框出现

    js如何实现点击标签文字,文字在文本框出现

    这篇文章主要介绍了js如何实现点击标签文字,文字在文本框出现,感兴趣的小伙伴们可以参考下
    2015-08-08
  • 动态刷新 dorado树的js代码

    动态刷新 dorado树的js代码

    动态刷新 dorado树的js代码
    2009-06-06

最新评论