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


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 面向对象技术基础教程
Mar 03 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
VUE实现密码验证与提示功能
Oct 18 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+DBM的同学录程序(2)
2006/10/09 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
Promise扫盲贴
2019/06/24 Javascript
js实现随机点名功能
2020/12/23 Javascript
Python功能键的读取方法
2015/05/28 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python pandas库的安装和创建
2019/01/10 Python
python基础梳理(一)(推荐)
2019/04/06 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
性能测试工程师的面试题
2015/02/20 面试题
小学生元旦感言
2014/02/26 职场文书
市场营销方案范文
2014/03/11 职场文书
仓库管理计划书
2014/05/04 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
公司放假通知怎么写
2015/04/15 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js