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


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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
Javascript函数式编程语言
Oct 11 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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 获取可变函数参数的函数
2009/08/26 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python反扒机制的5种解决方法
2021/02/06 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
关爱女孩行动实施方案
2014/03/13 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
农村婚庆主持词
2015/06/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
利用Python多线程实现图片下载器
2022/03/25 Python