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


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函数
May 27 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
JS实现图片切换特效
Dec 23 Javascript
详解Vue的列表渲染
Nov 20 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(3)
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
联谊活动总结
2014/08/28 职场文书
2015会计试用期工作总结
2014/12/12 职场文书