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

您可能感兴趣的文章:

JS动态添加iframe的代码
这篇文章主要介绍了JS动态添加iframe的代码,需要的朋友可以参考下
2015-09-09
html中鼠标滚轮事件onmousewheel的处理方法
下面小编就为大家带来一篇html中鼠标滚轮事件onmousewheel的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript两种计时器的实例讲解
今天小编就为大家分享一篇关于JavaScript两种计时器的实例讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
跟我学习javascript的函数调用和构造函数调用
跟我学习javascript的函数和构造函数调用，主要包括三方面内容函数调用、方法调用以及构造函数调用，想要了解这些内容的朋友千万不要错过下面的内容。
2015-11-11
详解Flutter如何用思源宋体炫出你的UI
这篇文章主要为大家介绍了Flutter如何用思源宋体炫出你的UI示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
js倒计时小实例（多次定时）
这篇文章主要介绍了js实现可多次定时的倒计时小实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js学习心得_一个简单的动画库封装tween.js
下面小编就为大家带来一篇js学习心得_一个简单的动画库封装tween.js。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
50行代码实现Webpack组件使用次数统计
这篇文章主要介绍了50行代码实现Webpack组件使用次数统计,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
js日期、星座的级联显示代码
本篇文章主要是对js日期、星座的级联显示代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
全面接触神奇的Bootstrap导航条实战篇
导航条（navbar）在Bootstrap中是一个独立组件，导航条（navbar）和导航（nav）在Bootstrap中是有明显区别的，本文全面接触神奇的Bootstrap导航条，感兴趣的小伙伴们可以参考一下
2016-08-08