微信小程序之获取当前位置经纬度以及地图显示

时间:2022-06-13 23:06:08

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度。

  • 微信小程序的主体部分包括:

     app.js:必填,小程序逻辑,由js代码写成;

   app.json:必填,小程序公共设置,页面配置、滚动条、标题的显示等等;

   app.wxss:非必填,公共样式表,即css;

   app.wxml:非必填,模板文件。

  • 新增页面需要在app.json进行配置:
  "pages":[
"pages/index/index",
"pages/location/location",
"pages/logs/logs"
]
  • 通过在视图层调用bindtap与逻辑层中的方法匹配--实现页面跳转:

视图层

  <view class="location" bindtap="locationViewTap">
<button>获取用户当前位置</button>
</view>

逻辑层

  locationViewTap: function(){
wx.navigateTo({
url: '../location/location'
})
}
  • 通过在视图层调用bindtap与逻辑层中的方法匹配--实现方法调用:

视图层

    <button bindtap="mapViewTap" style="margin:10px">查看地图</button>
<button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>

逻辑层

 mapViewTap:function(){
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
console.log(res)
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
scale: 28
})
}
})
}
  • 有关地图位置的三个接口:

  (1) wx.getLocation(OBJECT) 获取当前的地理位置、速度

    success返回参数:

latitude 纬度,浮点数,范围为-90~90,负数表示南纬
longitude 经度,浮点数,范围为-180~180,负数表示西经
speed 速度,浮点数,单位m/s
accuracy 位置的精确度

(2) wx.openLocation(OBJECT)  使用微信内置地图查看位置

   OBJECT参数说明:

参数 类型 必填 说明
latitude Float 纬度,范围为-90~90,负数表示南纬
longitude Float 经度,范围为-180~180,负数表示西经
scale INT 缩放比例,范围5~18,默认为18
name String 位置名
address String 地址的详细说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

  (3) wx.chooseLocation(OBJECT) 打开地图选择位置

   success返回参数:

name 位置名称
address 详细地址
latitude 纬度,浮点数,范围为-90~90,负数表示南纬
longitude 经度,浮点数,范围为-180~180,负数表示西经
  • 实现效果

 利用getLocation获取当前位置的经纬度坐标

微信小程序之获取当前位置经纬度以及地图显示

openLocation打开微信内置地图查看

微信小程序之获取当前位置经纬度以及地图显示

    

利用chooseLocation选取位置,并将位置信息的经纬度实时响应显示

微信小程序之获取当前位置经纬度以及地图显示

实时显示经纬度:

微信小程序之获取当前位置经纬度以及地图显示

  注意事项:

   (1) 利用getLocation()获得的地图参数信息只有两个

         微信小程序之获取当前位置经纬度以及地图显示

     利用chooselocation返回的参数如下:

微信小程序之获取当前位置经纬度以及地图显示

    (2) this.setData修改json里面的值

    逻辑层中的json数据可以通过WXML文件{{json}}显示出来:

    微信小程序之获取当前位置经纬度以及地图显示

微信小程序之获取当前位置经纬度以及地图显示的更多相关文章

  1. 微信小程序之获取用户位置权限(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...

  2. 在微信小程序中将获取到的经纬度(经度纬度)转地址(地名)

    var QQMapWX = require('qqmap-wx-jssdk') var qqmapsdk = new QQMapWX({ key: '填写你的key' // 必填 }) wx.getL ...

  3. 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...

  4. 微信小程序如何获取openid

    微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // ...

  5. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

  6. 微信小程序后台获取用户的opeid

    1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...

  7. 微信小程序,获取二维码

    微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址

  8. nodejs&plus;koa&plus;uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  9. uniapp的微信小程序,获取授权,获取中文街道地理位置

    w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...

随机推荐

  1. Java ConcurrentHashmap 解析

    总体描述: concurrentHashmap是为了高并发而实现,内部采用分离锁的设计,有效地避开了热点访问.而对于每个分段,ConcurrentHashmap采用final和内存可见修饰符Volat ...

  2. Android - Get Bluetooth UUID for this device

    Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join th ...

  3. 深入java虚拟机学习 -- 类的加载机制&lpar;四&rpar;

    类加载的命名空间 每个类加载器都有自己的命名空间,命名空间由所有以此加载器为初始类加载器的类组成,不同命名空间的两个类是不可见的,但只要得到类所对应的Class对象的refrence(反射),还是可以 ...

  4. 国产多维数据库 NeuralCube!中国人自己的大数据底层核心技术!

    商业转载请联系作者获得授权,非商业转载请注明出处. 提到‘数据库’,首先被想到的肯定是Oracle.DB2.SQL Server.MySql这些传统的关系型数据库.数据库的概念是非常宽泛的,除了上述的 ...

  5. MFC中关于运行时类信息及动态创建对象的两个宏的意义(转)

    http://blog.csdn.net/ligand/article/details/49839507 MFC运行时类信息 用途: 程序在运行时,获取对象类的信息及类的继承关系 实现: 1.定义的类 ...

  6. To be better —msup荣获平安科技&OpenCurlyDoubleQuote;2018年度优秀合作伙伴”称号

    2018年12月4日,平安科技在深圳平安金融中心举办了“2018年平安科技优秀培训合作伙伴交流会”,msup收到了邀请参与此次评选,并从80余家合作伙伴中脱颖而出,在交付量.满意度.师资内容.服务水准 ...

  7. Android so 文件进阶&lt&semi;三&gt&semi; so文件的简单加密

    0x00  前言 之前的两篇文章从链接视图和执行视图分析了elf文件的大致结构,这篇文章主要内容是对于so文件进行简单的加密工作,针对Ida等静态分析工具的分析,一旦开始动态调试就应该很容易就可以du ...

  8. 手机浏览器&lowbar;安卓&lowbar;苹果手机Webview 中唤醒APP

    Url scheme是iOS,Android平台都支持,只需要原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP.比如 <!-- 打开考拉APP首页 --> & ...

  9. python 工具 eclipse pydev工具安装。

    1.下载eclipse 2.下载java jre(这个会在运行eclipse的时候提示你下载,,根据系统型号下载就行) 3.下载完jre后,把目录下javaw.exe的路径添加到系统path环境变量中 ...

  10. 【转载】Redis Sentinel 高可用服务架构搭建

    作者:田园里的蟋蟀 出处:http://www.cnblogs.com/xishuai/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. 阅读 ...