微信小程序 可搜索的地址选择实现详解
2019-08-28 11:46
1011 查看
这篇文章主要介绍了微信小程序 可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
最终实现效果:
效果实现步骤
新建index文件夹
index.wxml
<!--pages/index/index.wxml--> <view class='container'> <view bindtap='onChangeAddress'> <input value="{{address}}" name="address" placeholder="选择地点"> </view> </view>
index.js
// pages/index/index.js Page({ data: { address: '' }, onChangeAddress() { var _page = this; wx.chooseLocation({ success: (res) => { _page.setData({ address: res.name }); }, fail: (err) => { console.log(err); } }); } })
新建map文件夹
map.wxml
<!--pages/map/map.wxml--> <view class="container"> <map id="myMap" style="width: 100%; height: 100%;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location ></map> </view>
map.js
// pages/map/map.js Page({ data: { latitude: 31.22786, longitude: 121.46658, markers: [{ id: 1, latitude: 31.22786, longitude: 121.46658, name: '上海招商局广场' }] }, onReady(e) { this.mapCtx = wx.createMapContext('myMap') } })
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现省市区三级地址选择 picker
- 微信小程序首页的分类功能和搜索功能的实现思路及代码详解
- 微信小程序实现省市区三级地址选择
- 微信添加地址时选择地区功能是怎么实现的
- 微信小程序的选择收货地址、新增地址、地址管理等模块的总结(1)
- 微信小程序开发之相册选择和拍照详解及实例代码
- 微信小程序开发详解---小知识,大功能【实现按钮的随着手指移动】
- 小程序微信退款功能实现方法详解【基于thinkPHP】
- 微信小程序 实现拖拽事件监听实例详解
- 微信小程序 flex实现导航实例详解
- 微信小程序实现topBar底部选择栏效果
- 微信小程序实现工作时间段选择
- 微信小程序 腾讯地图SDK 获取当前地址实现解析
- 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
- 微信小程序 支付功能实现PHP实例详解
- 微信小程序搜索组件wxSearch实例详解
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 答题微信小程序实现(5):大功告成,整个模板,题库导入/切换/积分/选择对错判断/闯关成功
- 基于java的微信小程序的实现(十)用户搜索及热搜词相关功能后端实现
- 详解微信小程序实现仿微信聊天界面(各种细节处理)