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


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 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
js渐变显示渐变消失示例代码
2013/08/01 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Django框架实现逆向解析url的方法
2018/07/04 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
高级销售员求职信
2013/10/25 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
学生手册家长评语
2014/02/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android