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


Posted in Javascript onOctober 31, 2018

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

使用了腾讯地图提供的免费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)
   }
  })
  }
 })
 } 
})

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

Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
微信小程序ibeacon三点定位详解
Oct 31 #Javascript
小程序获取周围IBeacon设备的方法
Oct 31 #Javascript
详解js删除数组中的指定元素
Oct 31 #Javascript
You might like
PHP 工厂模式使用方法
2010/05/18 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
jquery中动态效果小结
2010/12/16 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
详解vue中组件参数
2018/07/09 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
2014年公司工作总结
2014/11/22 职场文书
检讨书模板大全
2015/05/07 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Python实现简单得递归下降Parser
2022/05/02 Python