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


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 jQuery插件练习
Dec 24 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
Three.js实现简单3D房间布局
Dec 30 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实现验证码功能
2006/10/09 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python:socket传输大文件示例
2017/01/18 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
pandas删除指定行详解
2019/04/04 Python
python中必要的名词解释
2019/11/20 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python Http请求json解析库用法解析
2020/11/28 Python
ASP.NET Core中的配置详解
2021/02/05 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
函授本科自我鉴定
2014/02/04 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
业务员简历自我评价
2014/03/06 职场文书
批评与自我批评范文
2014/10/15 职场文书
javaScript Array api梳理
2021/03/31 Javascript
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫