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


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学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JavaScript实现星级评分
Jan 12 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
常用的9个JavaScript图表库详解
Dec 19 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
详解vue的双向绑定原理及实现
May 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
js下弹出窗口的变通
2007/04/18 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python requests使用socks5的例子
2019/07/25 Python
python函数的万能参数传参详解
2019/07/26 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
应届生面试求职信
2014/07/02 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2015年城管执法工作总结
2015/07/23 职场文书