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


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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
js实现简单五子棋游戏
May 28 Javascript
react中的DOM操作实现
Jun 30 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
js星星评分效果
2014/07/24 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
jupyter 添加不同内核的操作
2021/02/06 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
新春文艺演出主持词
2014/03/27 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
健康教育主题班会
2015/08/14 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
python turtle绘图
2022/05/04 Python