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


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 相关文章推荐
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
一个可复用的vue分页组件
May 15 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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 Error与Logging函数的深入理解
2013/06/03 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python可变参数函数用法实例
2015/07/07 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python实现简单图书管理系统
2019/11/22 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
毕业生的自我评价
2013/12/30 职场文书
人民教师求职自荐信
2014/03/12 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
文明班级申报材料
2014/12/24 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL