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


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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 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上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php数组去重复数据示例
2014/02/25 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
javascript计算渐变颜色的实例
2017/09/22 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python 实现try重新执行
2019/12/21 Python
没编程基础可以学python吗
2020/06/17 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
开会迟到检讨书
2014/01/08 职场文书
大型会议接待方案
2014/03/01 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
商超业务员岗位职责
2015/02/13 职场文书
投标售后服务承诺书
2015/04/29 职场文书
防溺水主题班会教案
2015/08/12 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Django实现聊天机器人
2021/05/31 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android