微信小程序实现自动定位功能

本文实例为大家分享了微信小程序实现自动定位的具体代码，供大家参考，具体内容如下

使用了腾讯地图提供的免费api：

需要引入一个js文件：下载地址

js代码：

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmap = new QQMapWX({
//在腾讯地图开放平台申请密钥 http://lbs.qq.com/mykey.html
 key: 'your KEY'
});
Page({
 data: {
 myLatitude: "",
 myLongitude: "",
 myAddress: ""
 },
 onLoad: function(){
 var that = this
 //用微信提供的api获取经纬度
 wx.getLocation({
  type: 'wgs84',
  success: function(res){
  that.setData({myLatitude: res.latitude, myLongitude: res.longitude})
  //用腾讯地图的api，根据经纬度获取城市
  qqmap.reverseGeocoder({
   location: {
   latitude: that.data.myLatitude,
   longitude: that.data.myLongitude
   },
   success: function (res) {
   console.log(res)
   var a = res.result.address_component
   //获取市和区（区可能为空）
   that.setData({myAddress: a.city + a.district})
   //控制台输出结果
   console.log(that.data.myAddress)
   }
  })
  }
 })
 }
})

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

赞 (0)

相关推荐

  • 微信小程序 地图定位简单实例

    微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序ibeacon三点定位详解

    空余时间简单写了一个微信小程序ibeacon三点定位. 事先淘宝买了七八个ibeacon小设备,放置在办公司角落.分别设置三个ibeacon的位置坐标点,根据每一个ibeacon到已经开启蓝牙的目标物距离,计算出目标物在当前区域内坐标位置.适用于区域内购物指示.当然,进入该区域事先要打开手机蓝牙. 下面代码: var app = getApp() Page({ data: { motto: 'Hello World', openBLE:'打开蓝牙设备', startBLEDiscovery:'初

  • 详解微信小程序 相对定位和绝对定位

    详解微信小程序 相对定位和绝对定位

    详解微信小程序 相对定位和绝对定位 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位 相对定位: position:relative;    /*启用相对定位*/         left:150rpx;    /*相对于自己往右偏离150*/         top:50rpx;     /*相对于自己往下偏离150*/ 绝对定位: position: absolute;           left: 50rpx;         

  • 微信小程序定位当前城市的方法

    微信小程序定位当前城市的方法

    微信小程序定位获取当前所在城市,供大家参考,具体内容如下 1.利用微信小程序接口 wx.getLocation() 获取当前经纬度,接口. 2.拿到经纬度之后,通过微信的wx.request()请求百度地图的解析接口,传入我们获取到的经纬度,拿到当前定位的城市. Page({ data: { city: '' }, onLoad: function (options) { this.loadInfo(); }, loadInfo: function () { var page = this wx

  • 微信小程序实现锚点定位楼层跳跃的实例

    微信小程序实现锚点定位楼层跳跃的实例

    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&

  • 微信小程序 定位到当前城市实现实例代码

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

  • 微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    前言 在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 实现方法 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key).

  • 微信小程序 图片绝对定位(背景图片)

    微信小程序 图片绝对定位 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的

  • 微信小程序实现自动定位功能

    本文实例为大家分享了微信小程序实现自动定位的具体代码,供大家参考,具体内容如下 使用了腾讯地图提供的免费api: 需要引入一个js文件:下载地址 js代码: // 引入SDK核心类 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmap = new QQMapWX({ //在腾讯地图开放平台申请密钥 http://lbs.qq.com/mykey.html key: 'your KEY' }); Page({ data:

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序显示下拉列表功能【附源码下载】

    微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 微信小程序实现日历功能

    微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

  • 微信小程序显示倒计时功能示例【测试可用】

    微信小程序显示倒计时功能示例【测试可用】

    本文实例讲述了微信小程序显示倒计时功能.分享给大家供大家参考,具体如下: 微信小程序中显示倒计时: index.wxml: <view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4E

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

  • 微信小程序实现签到功能

    本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下 效果图: 今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期 如:["16", "14"] 点击签到执行 calendarSign sign.wxml <!--index.wxml--> <view class="calendar"> <view class='bcfff'> <view class=&q

随机推荐