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


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 textContent与innerText的异同分析
Oct 22 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
JS代码实现页面切换效果
Jan 10 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
扩展你的 PHP 之入门篇
2006/12/04 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
浅谈python中set使用
2016/06/30 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
平安家庭示范户事迹
2014/06/02 职场文书
五年级上册复习计划
2015/01/19 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏