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

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

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

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

新增页面需要在app.json进行配置:

 "pages":[
  "pages/index/index",
  "pages/location/location",
  "pages/logs/logs"
 ]

通过在视图层调用bindtap与逻辑层中的方法匹配--实现页面跳转:

视图层

 
  
 

逻辑层

 locationViewTap: function(){
  wx.navigateTo({
   url: '../location/location'
  })
 }

通过在视图层调用bindtap与逻辑层中的方法匹配--实现方法调用:

视图层

  
  

逻辑层

 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}}显示出来:

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

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

时间: 2017-05-08

微信小程序 滚动到某个位置添加class效果实现365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序滚动到某个位置添加class效果 假设这里有

微信小程序 获取当前地理位置和经纬度实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序实例-获取当前的地理位置.经纬度 微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS365bet体育在线官网_365体育投注平台_365在线体育消息 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: fu

Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例365bet体育在线官网_365体育投注平台_365在线体育消息, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口365bet体育在线官网_365体育投注平台_365在线体育消息:

微信小程序 获取session_key和openid的实例

微信小程序 获取session_key和openid的实例 说说获取session_key和openid的条件 1.AppID(小程序ID); 2.AppSecret(小程序密钥); 3.登录时获取code; 注意:即使获取到了appid,未通过打款验证,也是不能拿到code的. 打印出来是这样的. 获取流程: 1.公众平台上找到AppID(小程序ID)和AppSecret(小程序密钥); 2.微信小程序中调用API获取code wx.login({ success: function(res)

微信小程序三级联动地址选择器的实例365bet体育在线官网_365体育投注平台_365在线体育消息

本文介绍了微信小程序三级联动地址选择器的实例365bet体育在线官网_365体育投注平台_365在线体育消息,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

微信小程序封装http访问网络库实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序封装http访问网络库实例365bet体育在线官网_365体育投注平台_365在线体育消息 之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 365bet体育在线官网_365体育投注平台_365在线体育消息如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(

微信小程序 swiper组件详解及实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加365bet体育在线官网_365体育投注平台_365在线体育消息:

微信小程序 定位到当前城市实现实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 定位到当前城市 首先需要申请百度地图Geocoding API Geocoding API包括地址解析和逆地址解析功能: 1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:"北京市海淀区中关村南大街27号"地址解析的结果是"lng:116.31985,lat:39.959836".同时,地理编码也支持名胜古迹.标志性建筑名称直接解析返回百度经纬度,例如:"百度大厦"地址解析的结果是"lng:116.

微信小程序 ecshop地址三级联动实现实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 ecshop地址3级联动实现实例365bet体育在线官网_365体育投注平台_365在线体育消息 picker标签,官方给出的实例: 地区选择器

微信小程序 WXDropDownMenu组件详解及实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能:?适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

微信小程序 require机制详解及实例365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT