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


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
uniapp实现横向滚动选择日期
Oct 21 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调用API接口实现天气查询功能的示例
2017/09/21 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python操作redis的方法
2015/07/07 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python数据挖掘需要学的内容
2019/06/23 Python
自学python用什么系统好
2020/06/23 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
《赶海》教学反思
2014/04/20 职场文书
学生安全承诺书
2014/05/22 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
给领导的感谢信范文
2015/01/23 职场文书
大学生个人学年总结
2015/02/15 职场文书
python编写函数注意事项总结
2021/03/29 Python
如何在C++中调用Python
2021/05/21 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers