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


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 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Javascript中的async awai的用法
May 17 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php如何连接sql server
2015/10/16 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python callable内置函数原理解析
2020/03/05 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书