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


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 继承实现例子
Aug 12 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
js调用网络摄像头的方法
Dec 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php函数连续调用实例分析
2015/07/30 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python简单实现基数排序算法
2015/05/16 Python
python中的lambda表达式用法详解
2016/06/22 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
参观监狱心得体会
2014/01/02 职场文书
学校教师安全责任书
2014/07/23 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
会议新闻稿
2015/07/17 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android