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


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动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
fastadmin中调用js的方法
May 14 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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中常用的转义函数
2014/02/28 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
运算符&&的三个不同层次
2013/04/07 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
python的常用模块之collections模块详解
2018/12/06 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
Ref与out有什么不同
2012/11/24 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
校园广播稿500字
2014/02/04 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
三八妇女节标语
2014/10/09 职场文书
教导处教学工作总结
2015/08/12 职场文书
高中体育课教学反思
2016/02/16 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS