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


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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
vue中监听返回键问题
Aug 28 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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运算符的知识大全
2011/11/03 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
详解vue.js的devtools安装
2017/05/26 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python中Apriori算法实现讲解
2017/12/10 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python随机数函数代码实例解析
2020/02/09 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
大学校庆邀请函
2014/01/11 职场文书
运动会开幕式解说词
2014/02/05 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL