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

更新时间：2019年08月28日 11:46:38 作者：可怜的小黑兔

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

最终实现效果：

效果实现步骤

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js传各种类型参数到Controller层的整理方式
这篇文章主要介绍了js传各种类型参数到Controller层的整理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
JS for in遍历对象顺序不对解决办法
最近使用for-in语句遍历对象属性时发现遍历顺序并非属性构建顺序,这篇文章主要给大家介绍了关于JS for in遍历对象顺序不对的解决办法,需要的朋友可以参考下
2023-11-11
微信小程序使用ucharts在小程序中加入横屏展示功能的全过程
这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
JS利用原生canvas实现图形标注功能
这篇文章主要为大家详细介绍了JS如何利用原生canvas实现图形标注功能,支持矩形、多边形、线段、圆形等已绘制的图形进行缩放,移动,需要的可以参考下
2024-03-03
javascript解析xml字符串的函数
在使用操作XML文件时,我们可以使用Load方法直接加载xml文件即可，在ie和ff下通用。
2008-06-06
Postman的FormData传参的使用示例详解
今年上半年因为做毕设的原因,有自己接触到后端,也是用过了postman去测试接口,看到了postman那边的参数形式,一直对这个formData有想法,今天通过本文给大家介绍Postman的FormData传参的使用,感兴趣的朋友一起看看吧
2023-10-10
JS+JSP checkBox 全选具体实现
本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下
2014-01-01
ES6入门教程之Iterator与for...of循环详解
最近在学习ES6，刚刚看到Iterator和for...of循环这一章，所以想要跟大家略微分享一下，下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料，不足之处还望大家多多指正，需要的朋友们可以参考学习。
2017-05-05
使用JavaScript实现页面局部更新的方法总结
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
2023-12-12
还不懂递归？读完这篇文章保证你会懂
你还不懂递归？读完这篇文章保证你会懂，下面这篇文章主要给大家介绍了关于递归的相关内容，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-07-07