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


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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
js实现可爱的气泡特效
Sep 05 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
Syphon 秘笈
2021/03/03 冲泡冲煮
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python实现的读写json文件功能示例
2018/06/05 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
如何理解Python中包的引入
2020/05/29 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
工程业务员岗位职责
2013/12/31 职场文书
相亲大会策划方案
2014/06/05 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
单位在职证明书
2014/09/11 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
小学生手册家长意见
2015/06/03 职场文书
鸡毛信观后感
2015/06/11 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android