微信小程序 可搜索的地址选择实现详解


Posted in Javascript onAugust 28, 2019

这篇文章主要介绍了微信小程序 可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

最终实现效果:

微信小程序 可搜索的地址选择实现详解

效果实现步骤

新建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')
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
JS链式调用的实现方法
Mar 07 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 #Javascript
TypeScript类型声明书写详解
Aug 28 #Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
JS开发自己的类库实例分析
Aug 28 #Javascript
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
js微信分享实现代码
2020/10/11 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Vue实现简单分页器
2018/12/29 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
对python 自定义协议的方法详解
2019/02/13 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python实现自动签到脚本功能
2020/08/20 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
护士节策划方案
2014/05/19 职场文书
关于诚信的活动方案
2014/08/18 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
会议新闻稿
2015/07/17 职场文书
严以用权学习心得体会
2016/01/12 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers