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


Posted in Javascript onJuly 19, 2018

微信小程序定位获取当前所在城市,供大家参考,具体内容如下

1、利用微信小程序接口 wx.getLocation() 获取当前经纬度,接口。

2、拿到经纬度之后,通过微信的wx.request()请求百度地图的解析接口,传入我们获取到的经纬度,拿到当前定位的城市。

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

Page({
 data: {
 city: ''
 },
 onLoad: function (options) { 
 this.loadInfo(); 
 },
 loadInfo: function () {
 var page = this
 wx.getLocation({
  type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 
  success: function (res) {
  // success 
  var longitude = res.longitude
  var latitude = res.latitude
  page.loadCity(longitude, latitude)
  },
  fail: function () {
  // fail 
  },
  complete: function () {
  // complete 
  }
 })
 },
 
 loadCity: function (longitude, latitude) {
 var page = this
 wx.request({
  url: 'http://api.map.baidu.com/geocoder/v2/?ak=写自己的ak&location=' + latitude + ',' + longitude + '&output=json&pois=1',
  //这里的ak 是去百度地图api获取的需要自己登陆获取一下 地址:https://lbsyun.baidu.com/index.php?title=wxjsapi
  data: {},
  header: {
  'Content-Type': 'application/json'
  },
  success: function (res) {
  // success 
  console.log(res);
  var city = res.data.result.addressComponent.city;
 
  console.log("城市为" + city)
  page.setData({ city: city });
  },
  fail: function () {
  // fail 
  },
  complete: function () {
  // complete 
  }
 })
 }
});

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

Javascript 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 #Javascript
js中split()方法得到的数组长度问题
Jul 19 #Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 #Javascript
微信小程序表单弹窗实例
Jul 19 #Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 #Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 #Javascript
You might like
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
JS Input里添加小图标的两种方法
2017/11/11 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
python re模块findall()函数实例解析
2018/01/19 Python
python3.7.0的安装步骤
2018/08/27 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
服务员自我评价
2014/01/25 职场文书
《忆江南》教学反思
2014/04/07 职场文书
校园广播稿精选
2014/10/01 职场文书
公民授权委托书
2014/10/15 职场文书
趣味运动会开幕词
2015/01/28 职场文书
观看建国大业观后感
2015/06/01 职场文书
火烧圆明园观后感
2015/06/03 职场文书
任长霞观后感
2015/06/16 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python