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


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的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JavaScript实现简单图片切换
Apr 29 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
几行js代码实现自适应
2017/02/24 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
浅析Python中的for 循环
2016/06/09 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
简短证婚人证婚词
2014/01/09 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
最感人的道歉情书
2015/05/12 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
CentOS安装Nginx并部署vue
2022/04/12 Servers