微信小程序地图上选择位置
实现效果
很多小程序都有如下需求:
小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化
点击地址选择地点
选择地点之后
源码实现
下面不仅仅是源码,还希望通过源码尽量讲解小程序的相关知识
视图 index.wxml
index.wxml:
<view class='address' bindtap='onChangeAddress'>{{address}}</view>
view 组件可用作父容器,也可以用来展示一段文本,text组件也可以用来展示文本,区别在于view中的文本不能选中。
{{}} 是小程序中数据绑定的语法。在小程序中没有 dom 和 bom,所以不能根据id等属性获取控件,只能通过数据绑定的方式。
在index.js 中未变量 addresss 赋值,然后 index.wxml 中就可以自动更新,这与 angular 很像,但是,小程序中是单项绑定。
tap 是一个触摸事件,小程序中使用 bind 或者 catch 方式绑定事件,其属性值是一个函数名称,这个函数在 index.js 中定义,当用户触摸此 view 时就会执行对应的函数
逻辑层 index.js
//引用腾讯地图API
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({/*** 页面的初始数据*/data: {address: "",src:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*判断是第一次加载还是从position页面返回如果从position页面返回,会传递用户选择的地点*/if (options.address != null && options.address != '') {//设置变量 address 的值this.setData({address: options.address});} else {// 实例化API核心类qqmapsdk = new QQMapWX({//此key需要用户自己申请key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'});var that = this;// 调用接口qqmapsdk.reverseGeocoder({success: function (res) {that.setData({address: res.result.address});},fail: function (res) {//console.log(res);},complete: function (res) {//console.log(res);}});}}
index.js 中的所有代码都应该放在 page 函数中
其中 onLoad 函数是内置函数,大致相当于 js 中的 window.onload 函数。
如果是其他页面跳转过来,并且通过 问号的方式传递参数过来,可以使用 options.参数名称获取对应的值。
这里用到了腾讯地图小程序客户端API,上面的函数就是API中的一个,作用是提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。具体的使用方法参见官网,这里就不做赘述了,官网地址:点击打开链接
调用成功之后获取地址并赋值给变量 address
这里要注意,必须通过 setData() 函数设置变量的数据,视图中才可以更新
在地图中选择位置
如果用户觉得定位不准,可以点击 位置信息,打开地图页面,代码如下
onChangeAddress: function (e) {wx.navigateTo({url: "/pages/position/position"});}
wx.navigateTo 函数用于跳转到其他页面,可以在url 值后面以 ?参数名=参数值 的方式传递参数
position.wxml:
<view class="page-body"><view class="page-section page-section-gap"><map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map></view>
</view>
map 是小程序中的组件,用于显示地图信息,属性 latitude 和 longitude 用于设置地图的中心点
下面是 position.js 完整代码
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({data: {latitude: 0,//地图初次加载时的纬度坐标longitude: 0, //地图初次加载时的经度坐标name:"" //选择的位置名称},onLoad: function () {// 实例化API核心类qqmapsdk = new QQMapWX({key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'});this.moveToLocation(); },//移动选点moveToLocation: function () {var that = this;wx.chooseLocation({success: function (res) { console.log(res.name); //选择地点之后返回到原来页面wx.navigateTo({url: "/pages/index/index?address="+res.name});},fail: function (err) {console.log(err)}});}
});
wx.chooseLocation 方法,会打开地图,并且默认以用户当前位置为中心点。并且会在下面展示周围一些地点列表,供用户选择,用户选择完地点后,点击 完成,会触发 其 success 参数指定的函数,可以通过参数 res获取地点名称、经纬度等相关信息
在这里,获取当相关信息后跳转到主页,同时将用户选择的位置名称传递过去
在 index.wxml 中,有一段代码用来处理:如果用户在点击 完成 前没有选择任何位置,则继续显示当前位置,否则显示用户选择的位置。
/*判断是第一次加载还是从position页面返回如果从position页面返回,会传递用户选择的地点*/if (options.address != null && options.address != '') {//设置变量 address 的值this.setData({address: options.address});} else {....}
微信小程序地图上选择位置相关推荐
- 微信小程序自带地图_微信小程序地图上选择位置
实现效果 很多小程序都有如下需求: 小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化 点击地址选择地点 选择地点之 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
- 微信小程序地图上显示图片,显示定位标记
地图是我们平时经常用到的组件,而且地图是显示在最高层的原生组件.任何组件都不能遮挡住map的显示,只有特殊的如cover-image等可以显示在地图的上层. <map id="map& ...
- 微信小程序地图返回当前位置map,
功能:点击右下角图标,地图中心点返回当前定位,且缩放为初始缩放值 需要解决的问题: 1.地图上下左右拖动后,点击右下角图标返回当前定位的位置 2.地图缩放大小后,点击右下角图标能返回初始化设置的缩放值 ...
- 微信小程序地图上图片放到下面
效果图 本来是写cover-view 与cover-image 的但是这3个图片弄了半天才弄好这里特意记录一下 实现效果如下 display: flex;flex-direction: row;jus ...
- 微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
- 【微信小程序】图片选择、转码、压缩、预览、上传,file与base64
0 前言 微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择 需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
- php小程序地图处理,微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
- php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如 ...
最新文章
- 七、DNS报文及抓包分析
- 可扩展性的builder模式的构建方法
- mysql和hive的sql语句,hive中使用sql语句需要注意的事项
- 从Windows 2012标准版升级到数据中心版
- 有一种感情,叫“发小”
- SQL 语句技巧--排名函数的使用实例
- asp.net: 应用母版页的页面,如何设置其标题?
- jquery on()方法绑定多个选择器,多个事件
- linux/windows eclipse远程调试 c/c++程序
- InstallShield 2015 Limited Edition 打包教程
- 微信小程序入门6-微信公众号授权登录(适用于H5小程序)
- DirectX修复工具 4.0 标准版
- veu使用element UI 表格问题
- VuePress开启评论、VuePress评论功能。
- Tomcat下发布war包产生两个不同版本的访问地址的解决方案appBase和docBase的关系
- sjtu1313 太湖旅行
- Point Attention Network for Semantic Segmentation of 3D Point Clouds 论文解析
- android包大小优化思路总结
- 西南科技大学 Python程序设计 班长选举
- Nginx 配置一个域名使用HTTPS 后其它域名访问HTTPS时也会跳转到该站点解决