微信小程序 定位到当前城市实现实例代码


Posted in Javascript onFebruary 23, 2017

微信小程序 定位到当前城市

首先需要申请百度地图Geocoding API

Geocoding API包括地址解析和逆地址解析功能:

1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”。同时,地理编码也支持名胜古迹、标志性建筑名称直接解析返回百度经纬度,例如:“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885” ,通用的POI检索需求,建议使用Place API。

2.逆地理编码:即逆地址解析,由百度经纬度信息得到结构化地址信息,例如:“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。

代码:

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: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak &location='+latitude+','+longitude+'&output=json', 
 data: {}, 
 header:{ 
 'Content-Type':'application/json' 
 }, 
 success: function(res){ 
 // success 
 console.log(res); 
 var city=res.data.result.addressComponent.city; 
 page.setData({city:city}); 
 }, 
 fail: function() { 
 // fail 
 }, 
 complete: function() { 
 // complete 
 } 
 }) 
 } 
})

index.wxml

<!--index.wxml--> 
<view class="container"> 
{{city}} 
</view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
JavaScript 巧学巧用
May 23 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 #Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 #Javascript
js模拟微博发布消息
Feb 23 #Javascript
You might like
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
js中的this关键字详解
2013/09/25 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python实现滑雪游戏
2020/02/22 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
公司成立感言
2014/01/11 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
服务标语大全
2014/06/18 职场文书
汽修专业自荐信
2014/07/07 职场文书
先进工作者推荐材料
2014/12/23 职场文书
检讨书格式
2015/01/23 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Python类方法总结讲解
2021/07/26 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers
python中validators库的使用方法详解
2022/09/23 Python