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


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 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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循环语句笔记(foreach,list)
2011/11/29 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
深入php多态的实现详解
2013/06/09 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
thinkPHP查询方式小结
2016/01/09 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python远程linux执行命令实现
2020/11/11 Python
垃圾回收的优点和原理
2014/05/16 面试题
大门门卫岗位职责
2013/11/30 职场文书
表彰先进集体通报
2014/01/12 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技