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


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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
小程序实现多列选择器
Feb 15 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
OpenLayers3实现地图显示功能
Sep 25 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字符串的编码问题的详细介绍
2013/04/27 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
页面使用密码保护代码
2013/04/10 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Django实现学员管理系统
2019/02/26 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
如何把python项目部署到linux服务器
2020/08/26 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Python中tqdm的使用和例子
2022/09/23 Python